CSS 選擇器介紹

1. 基本概念

CSS（層疊樣式表）是一種用于描述 HTML 或 XML 文檔外觀的語言。通過 CSS，可以控制網頁中元素的布局、顏色、字體等視覺效果。而 CSS 選擇器則是用來指定哪些 HTML 元素應該應用這些樣式的工具。

2. 基本選擇器

• 元素選擇器（Element Selector）
  根據 HTML 元素名稱來選擇元素。

  p { color: blue; } /* 所有段落文字顏色為藍色 */
  

• 類選擇器（Class Selector）
  通過 class 屬性值來選擇元素。以點 . 開頭。

  .highlight { background-color: yellow; } /* 具有 highlight 類的元素背景色為黃色 */
  

• ID 選擇器（ID Selector）
  通過 id 屬性值來選擇唯一的一個元素。以井號 # 開頭。

  #header { font-size: 24px; } /* ID 為 header 的元素字體大小為24像素 */
  

• 通用選擇器（Universal Selector）
  匹配所有 HTML 元素，使用星號 * 表示。

  * { margin: 0; padding: 0; } /* 所有元素的外邊距和內邊距均為0 */
  

3. 組合選擇器

• 后代選擇器（Descendant Combinator）
  匹配某個元素的所有后代元素，使用空格分隔。

  div p { color: red; } /* 所有在 div 內部的 p 元素文字顏色為紅色 */
  

• 子代選擇器（Child Combinator）
  匹配某個元素的直接子元素，使用 > 符號。

  ul > li { list-style-type: none; } /* 無序列表的直接子項 li 元素取消列表符號 */
  

• 相鄰兄弟選擇器（Adjacent Sibling Combinator）
  匹配緊接在另一個元素后的元素，使用 + 符號。

  h2 + p { font-weight: bold; } /* 跟在 h2 后的下一個 p 元素字體加粗 */
  

• 一般兄弟選擇器（General Sibling Combinator）
  匹配同一個父元素下的所有同類型兄弟元素，使用 ~ 符號。

  li ~ li { color: green; } /* 所有 li 元素中第二個及以后的字體顏色為綠色 */
  

4. 偽類選擇器

• :link 和 :visited
  用于鏈接的狀態，分別表示未訪問和已訪問。

  a:link { color: blue; } /* 鏈接初始狀態顏色為藍色 */
  a:visited { color: purple; } /* 訪問過的鏈接顏色為紫色 */
  

• :hover
  當鼠標懸停在元素上時觸發。

  button:hover { background-color: orange; } /* 懸停時按鈕背景色變為橙色 */
  

• :active
  表示被激活的元素，通常用于點擊狀態。

  a:active { color: red; } /* 點擊鏈接時顏色為紅色 */
  

• :focus
  用于表單元素獲得焦點時的狀態。

  input:focus { border: 2px solid blue; } /* 輸入框獲得焦點時邊框變為藍色 */
  

• :nth-child(n) 和 :nth-of-type(n)
  分別匹配第 n 個子元素和第 n 個同類型子元素。

  ul li:nth-child(2) { color: red; } /* 列表中第二個元素文字顏色為紅色 */
  

• :empty
  匹配沒有內容的元素（不含文本節點）。

  div:empty { display: none; } /* 沒有內容的 div 元素隱藏 */
  

5. 屬性選擇器

• [attribute]
  匹配具有指定屬性的元素。

  a[href] { color: blue; } /* 所有帶有 href 屬性的鏈接顏色為藍色 */
  

• [attribute=value]
  匹配屬性值完全匹配的元素。

  img[src="logo.png"] { width: 200px; } /* src 為 logo.png 的圖片寬度設為200像素 */
  

• [attribute^=value]、[attribute$=value]、[attribute=value]*
  分別匹配屬性值以 value 開頭、結尾和包含 value。

  a[href^="https"] { color: green; } /* href 以 https 開頭的鏈接顏色為綠色 */
  

6. 偽元素選擇器

• ::before 和 ::after
  在元素內容前或后插入內容，常用于添加圖標、引號等。

  blockquote::before { content: "?"; } /* 引用塊前插入引號 */
  

• ::first-line 和 ::first-letter
  分別匹配段落的第一行和第一個字母。

  p::first-line { font-weight: bold; } /* 段落第一行字體加粗 */
  

• ::selection
  匹配用戶選中的內容。

  ::selection { background-color: lightblue; } /* 選中文本背景色為淺藍色 */
  

7. 高級選擇器

• :not(selector)
  匹配不滿足指定條件的元素。

  :not(.highlight) { color: gray; } /* 不具有 highlight 類的元素顏色為灰色 */
  

• :enabled 和 :disabled
  用于表單元素，分別表示啟用和禁用狀態。

  input:disabled { opacity: 0.5; } /* 禁用的輸入框透明度設為0.5 */
  

8. 組合選擇器

• 組合多個選擇器
  可以通過逗號分隔多個選擇器，同時應用樣式。

  h1, h2, h3 { color: red; } /* 所有 h1、h2、h3 元素顏色為紅色 */
  

9. 優先級與覆蓋

• 特定選擇符
  使用 !important 提高樣式的優先級。

  .error { color: red !important; } /* 強制應用紅色 */
  

• 內聯樣式
  直接在 HTML 元素中定義的樣式具有最高優先級。

10. 響應式設計

• 媒體查詢
  根據設備特性應用不同的樣式。

  @media screen and (max-width: 600px) {nav { display: none; }
  } /* 屏幕寬度小于等于600像素時隱藏導航 */
  

11. CSS 模塊化

• 導入規則
  使用 @import 導入其他樣式表，但需注意順序和性能。

  @import url('normalize.css'); /* 導入 normalize.css 文件 */
  

12. 常用技巧

• 重置默認樣式
  通過引入 reset.css 或自定義規則清除瀏覽器默認樣式。

  * { margin: 0; padding: 0; box-sizing: border-box; } /* 設置所有元素的邊距和盒子模型 */
  

• 使用變量
  CSS 變量（Custom Properties）提高代碼復用性。

  :root {--primary-color: #3498db;
  }
  body { color: var(--primary-color); } /* 使用變量定義主色調 */
  

13. 性能優化

• 減少計算
  避免復雜的計算，盡可能使用預設值或固定單位。

  width: 50%; /* 避免寫成 calc(100% / 2) */
  

• 避免過度布局
  確保 CSS 布局結構合理，減少重排和重繪。

14. 兼容性

• 使用前綴
  為確保舊瀏覽器支持新特性，添加相應的廠商前綴。

  .box {display: flex;display: -webkit-flex; /* Chrome 早期版本 */
  }
  

• 測試與調試
  使用瀏覽器的開發者工具檢查樣式應用情況，并進行必要的調整。

15. 工具與資源

• 預處理器
  如 Sass、Less 等，提供變量、嵌套等高級功能。

  $primary-color: #3498db;
  .header { color: $primary-color; }
  

• 構建工具
  使用Webpack、Gulp等自動化處理 CSS 文件。

• UI 框架
  Bootstrap、Foundation 等提供現成的組件和布局，加速開發進程。

16. 最佳實踐

• 代碼規范
  保持代碼整潔，適當分隔功能模塊，添加注釋方便維護。

• 版本控制
  使用 Git 等工具管理 CSS 文件變更，便于協作與回溯。

通過以上內容的學習和實踐，可以系統地掌握 CSS 的核心概念、高級技巧以及最佳實踐，從而在實際項目中開發出高效、優雅且兼容性良好的網頁樣式。