CSS 選擇器參考手冊

什麼是 CSS 選擇器？

CSS 選擇器是用來選擇要套用樣式的 HTML 元素的模式。它們是 CSS 規則的基礎，允許您精確地針對特定的元素、類別、ID 或其他屬性進行樣式設定。理解和掌握各種 CSS 選擇器對於編寫高效和可維護的 CSS 代碼至關重要。無論是初學者還是資深開發者，學習 CSS 選擇器的各種類型和用法都能顯著提升您的前端開發能力。

如何使用本參考手冊？

本工具提供了所有常用 CSS 選擇器的完整列表、語法、描述和實用示例。您可以通過以下方式使用本手冊：

• 按分類瀏覽選擇器（基礎、組合子、屬性、偽類、偽元素）
• 使用搜尋功能快速找到特定選擇器或關鍵詞
• 查看每個選擇器的完整語法、詳細說明和實際範例
• 了解選擇器的特異性值如何影響 CSS 優先級
• 使用特異性計算器快速計算任何 CSS 選擇器的特異性分數
• 複製選擇器語法和範例代碼到您的項目中

CSS 選擇器的特異性

特異性是 CSS 用來確定當多個選擇器指向同一元素時哪個規則應被應用的方法。特異性由三個數字組成 (a, b, c)，其中：

• a = ID 選擇器的數量
• b = 類別選擇器、屬性選擇器和偽類的數量
• c = 元素選擇器和偽元素的數量

具有更高特異性值的選擇器將優先於較低的選擇器。例如，特異性 (1, 0, 0) 的 ID 選擇器總是優先於特異性 (0, 10, 10) 的類別和元素選擇器組合。

常見問題

何時應該使用 ID 選擇器？

ID 選擇器具有最高的特異性，應該謹慎使用。它們最好用於獨特的頁面元素，如主容器或主要頁首。過度使用 ID 選擇器會導致特異性衝突和難以維護的代碼。在大多數情況下，使用類別選擇器會提供更好的靈活性和可維護性。

* 通用選擇器有什麼用？

通用選擇器 (*) 選擇頁面上的所有元素。它常用於重置瀏覽器預設樣式。例如，許多開發者使用 * { margin: 0; padding: 0; } 來移除所有元素的預設邊距和填充。但要注意，過度使用通用選擇器可能會影響性能。

偽類和偽元素有什麼區別？

偽類（以單冒號 : 開頭）選擇元素的特定狀態，如 :hover、:focus、:nth-child。偽元素（以雙冒號 :: 開頭）創建虛擬元素，如 ::before、::after、::first-line。偽類作用於現有元素，而偽元素創建新的虛擬元素。

我可以組合多個選擇器嗎？

是的！您可以使用組合子組合選擇器：後代選擇器（空格）、子選擇器 (>)、相鄰同級選擇器 (+) 和通用同級選擇器 (~)。例如，div > p 選擇所有直接在 div 內的 p 元素。組合子使您能夠創建更具體和強大的選擇器。

如何計算複雜選擇器的特異性？

計算選擇器中每種類型的選擇器數量，然後將它們組合為 (a, b, c) 值。使用本頁上的特異性計算器可以自動為您計算複雜選擇器的特異性分數，省去手動計算的麻煩。

屬性選擇器如何工作？

屬性選擇器允許您基於 HTML 屬性選擇元素。例如，[type="text"] 選擇所有 type 屬性為 "text" 的元素。您也可以使用 [attr^="value"]（開頭）、[attr$="value"]（結尾）或 [attr*="value"]（包含）進行部分匹配。這對於選擇特定類型的表單元素或基於 href 屬性的鏈接非常有用。