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

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

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

第一章 元素選擇器：構(gòu)建樣式的基石

圖片

基礎語法與應用場景

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

/* 實戰(zhàn)示例：統(tǒng)一段落樣式 */
p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

典型場景：

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

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

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

圖片

組件化開發(fā)利器

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

/* 可復用按鈕組件 */
.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 個樣式屬性，防止出現(xiàn)"全能類"導致維護困難。

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

唯一性原則

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

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

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

全局初始化示例

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

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

性能優(yōu)化建議：

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

第五章 偽類選擇器：動態(tài)交互與上下文反應

常用偽類類型

進階示例：

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

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

關(guān)鍵比較與最佳實踐

選擇器權(quán)重層級

樣式架構(gòu)原則：

1. 優(yōu)先使用類選擇器構(gòu)建組件
2. 限制 ID 選擇器使用范圍
3. 使用 BEM 命名規(guī)范（如.block__element--modifier）

結(jié)語

推薦工具：

• MDN CSS 選擇器文檔
• Specificity Calculator

行動指南：

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

「記?。簝?yōu)秀的選擇器策略=70%類選擇器+20%偽類+10%其他。現(xiàn)在就開始優(yōu)化你的 CSS 選擇器吧」！