引言：為什么選擇器是 CSS 的核心工具？

CSS 選擇器如同網頁設計的"GPS 導航"，它能精準定位 HTML 元素并賦予樣式規則。作為前端開發的核心工具，選擇器直接決定了樣式的生效范圍和代碼的可維護性。掌握以下 5 個基礎選擇器，可構建覆蓋 90%場景的高效樣式體系：

1. 元素選擇器：快速定義全局基礎樣式
2. 類選擇器：創建可復用的樣式模塊
3. ID 選擇器：精確定位唯一元素
4. 通用選擇器：全局樣式初始化
5. 偽類選擇器：實現動態交互效果

第一章 元素選擇器：構建樣式的基石

圖片

基礎語法與應用場景

/* 基礎語法 */
元素名 {
  屬性: 值;
}

/* 實戰示例：統一段落樣式 */
p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

典型場景：

• 統一基礎排版（全局字體/字號設定）
• 重置瀏覽器默認樣式（如body邊距清零）

?? 技巧：低特異性（權重 0,0,1）使其易于被覆蓋，適合作為基礎樣式層。

第二章 類選擇器：靈活復用的樣式模塊

圖片

組件化開發利器

/* 基礎語法 */
.類名 {
  屬性: 值;
}

/* 可復用按鈕組件 */
.btn {
padding: 12px24px;
border-radius: 4px;
transition: all 0.3s;
}

.primary {
background: #2196f3;
color: white;
}

最佳實踐：

<button class="btn primary">主要按鈕</button> <a href="#" class="btn">鏈接按鈕</a>

?? 避免陷阱：單個類名不應超過 3 個樣式屬性，防止出現"全能類"導致維護困難。

第三章 ID 選擇器：精準定位的強效工具

唯一性原則

#header {
  height: 80px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

?? 慎用警告：濫用 ID 選擇器會導致樣式難以維護，如必須使用建議配合!important規避覆蓋問題。

第四章 通用選擇器：全局樣式的重置與一致性

全局初始化示例

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

性能優化建議：

1. 避免直接使用*設置復雜屬性（如transform）
2. 推薦配合重置庫（如 normalize.css）使用
3. 作用域限定（如div *優于全局*）

第五章 偽類選擇器：動態交互與上下文反應

常用偽類類型

進階示例：

/* 表格斑馬紋效果 */
tr:nth-child(odd) {
background: #f5f5f5;
}

/* 輸入框聚焦效果 */
input:focus {
border-color: #2196f3;
box-shadow: 008pxrgba(33, 150, 243, 0.3);
}

關鍵比較與最佳實踐

選擇器權重層級

樣式架構原則：

1. 優先使用類選擇器構建組件
2. 限制 ID 選擇器使用范圍
3. 使用 BEM 命名規范（如.block__element--modifier）

結語

推薦工具：

• MDN CSS 選擇器文檔
• Specificity Calculator

行動指南：

1. 在現有項目中重構 3 個選擇器
2. 使用 Chrome DevTools 審查選擇器性能
3. 嘗試實現組合選擇器（如input[type="text"]）

「記住：優秀的選擇器策略=70%類選擇器+20%偽類+10%其他。現在就開始優化你的 CSS 選擇器吧」！