CSS選擇器：特異性

以下節選自Tiffany B. Brown撰寫的《CSS大師》一書。本書在全球各地的商店有售，您也可以在此處購買電子書版本。

CSS 特異性決定了哪些樣式聲明最終應用於元素。通配符選擇器 (*) 特異性最低，ID 選擇器特異性最高。子孫選擇器（例如 p img）和子選擇器（例如 .panel > h2）比類型選擇器（例如 p、img 或 h1）特異性更高。

乍一看，計算精確的特異性值似乎很棘手。如《選擇器級別 3》中所述，您需要：

• 統計選擇器中 ID 選擇器的數量 (= A)
• 統計選擇器中類選擇器、屬性選擇器和偽類的數量 (= B)
• 統計選擇器中類型選擇器和偽元素的數量 (= C)
• 忽略通配符選擇器

然後將這些 A、B 和 C 值組合起來形成最終的特異性值。例如，ID 選擇器 #foo 的特異性為 1,0,0。屬性選擇器（例如 [type=email]）和類選擇器（例如 .chart）的特異性為 0,1,0。添加偽類（例如 :first-child，例如 .chart:first-child）會使特異性變為 0,2,0。但是，使用簡單的類型或元素選擇器（例如 h1 或 p）只會使特異性變為 0,0,1。

注意：計算特異性

Keegan Street 的特異性計算器和 Joshua Peek 的 CSS Explain 有助於學習和計算選擇器特異性。

當然，複雜的選擇器和組合選擇器會產生更高的特異性值。讓我們來看一個例子。考慮以下 CSS：

<code>ul#story-list > .book-review {
    color: #0c0;
}

#story-list > .book-review {
    color: #f60;
}</code>

這兩個規則集相似，但並不相同。第一個選擇器 ul#story-list > .bookreview 包含類型選擇器 (ul)、ID 選擇器 (#story-list) 和類選擇器 (.bookreview)。它的特異性值為 1,1,1。第二個選擇器 #story-list > .book-review 只包含 ID 選擇器和類選擇器。它的特異性值為 1,1,0。即使我們的#story-list > .book-review 規則成功應用於ul#story-list > .bookreview，但前者的特異性更高，這意味著具有.book-review 類的元素將為綠色而不是橙色。

諸如 :link 或 :invalid 之類的偽類與類選擇器具有相同的特異性級別。 a:link 和 a.external 的特異性值均為 0,1,1。類似地，諸如 ::before 和 ::after 之類的偽元素與類型或元素選擇器一樣特異。如果兩個選擇器的特異性相同，則級聯生效。這是一個例子：

<code>a:link {
    color: #369;
}
a.external {
    color: #f60;
}</code>

如果我們應用此 CSS，則除應用了 .external 類的鏈接外，所有鏈接都將為石板藍。這些鏈接將改為橙色。

保持較低的特異性有助於防止選擇器蔓延，即選擇器特異性和長度會隨著時間的推移而增加的趨勢。這通常發生在您向團隊添加新開發人員或向網站添加新內容形式時。選擇器蔓延還會導致長期的維護難題。您最終要么使用更特異的選擇器來覆蓋其他規則集，要么需要重構代碼。更長的選擇器還會增加 CSS 文件的權重。

我們在第 2 章中討論了保持低特異性的策略。

結論

閱讀本章後，您應該對 CSS 選擇器有很好的理解。具體來說，您現在應該知道如何：

• 使用選擇器將 CSS 應用於特定元素、偽元素和偽類
• 理解偽元素和偽類之間的區別
• 使用選擇器級別 3 和 4 規範中引入的較新的偽類
• 計算特異性

在下一章中，我們將介紹編寫可維護、可擴展 CSS 的一些黃金法則。

關於 CSS 選擇器和特異性的常見問題 (FAQ)

理解 CSS 特異性在 Web 開發中的重要性是什麼？

CSS 特異性是 Web 開發中的一個關鍵概念，因為它決定了瀏覽器應用哪個 CSS 規則。當多個 CSS 規則可以應用於某個元素時，瀏覽器會遵循特異性規則來決定使用哪個規則。理解 CSS 特異性可以幫助開發人員編寫更高效、更有效的 CSS 代碼，避免不必要的覆蓋，並更有效地排除 CSS 問題。

如何計算 CSS 特異性？

CSS 特異性的計算基於 CSS 規則中使用的不同類型的選擇器。每種類型的選擇器都有不同的特異性值。內聯樣式具有最高特異性，其次是 ID 選擇器、類選擇器、屬性選擇器和偽類，最後是類型選擇器和偽元素。 CSS 規則的特異性是其選擇器特異性值的總和。

你能用一個例子解釋 CSS 特異性的概念嗎？

讓我們考慮一個例子。假設我們有一個具有類選擇器 .class1 的 CSS 規則，另一個規則具有 ID 選擇器 #id1。如果這兩個規則可以應用於同一個元素，則將應用具有 ID 選擇器的規則，因為 ID 選擇器的特異性高於類選擇器。

當兩個 CSS 規則具有相同的特異性時會發生什麼？

當兩個 CSS 規則具有相同的特異性時，CSS 代碼中最後出現的規則將被應用。這是因為 CSS 在處理具有相同特異性的規則時遵循“最後規則獲勝”的策略。

如何覆蓋 CSS 特異性？

您可以通過提高 CSS 規則的特異性來覆蓋 CSS 特異性。這可以通過向規則添加更特異的選擇器來實現。另一種覆蓋 CSS 特異性的方法是使用 !important 規則。但是，應盡可能避免使用 !important，因為它會使您的 CSS 代碼更難以管理和調試。

繼承在 CSS 特異性中的作用是什麼？

繼承是 CSS 中的一個特性，其中某些特定類型的屬性會自動從父元素傳遞到其子元素。但是，繼承的樣式具有最低的特異性，並且可以很容易地被應用於元素的任何直接樣式覆蓋。

通配符選擇器如何影響 CSS 特異性？

通配符選擇器 (*) 對 CSS 特異性沒有影響。這意味著它的特異性值為 0,0,0,0。因此，在同一規則中使用的任何其他選擇器都將覆蓋通配符選擇器。

CSS 中偽元素的特異性是多少？

CSS 中偽元素的特異性為 0,0,0,1。這意味著它們與類型選擇器（如 div、p 等）具有相同的特異性，並且會被類選擇器、ID 選擇器和內聯樣式覆蓋。

:not() 偽類如何影響 CSS 特異性？

CSS 中的 :not() 偽類不會增加選擇器的特異性。相反，特異性的計算基於傳遞給 :not() 函數的參數。例如，在 :not(.class1) 中，特異性與 .class1 相同。

我可以在單個 CSS 規則中使用多個選擇器嗎？它如何影響特異性？

是的，您可以在單個 CSS 規則中使用多個選擇器。此類規則的特異性是其所有選擇器特異性的總和。例如，在 #id1.class1 中，特異性是 #id1 和 .class1 特異性的總和。

以上是CSS選擇器：特異性的詳細內容。更多資訊請關注PHP中文網其他相關文章！