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

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

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

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

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

注意：計算特異性

Keegan Street 的特異性計算器和 Joshua Peek 的 CSS Explain 有助於學(xué)習(xí)和計算選擇器特異性。

當(dāng)然，複雜的選擇器和組合選擇器會產(chǎn)生更高的特異性值。讓我們來看一個例子?？紤]以下 CSS：

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

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

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

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

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

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

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

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

結(jié)論

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

• 使用選擇器將 CSS 應(yīng)用於特定元素、偽元素和偽類
• 理解偽元素和偽類之間的區(qū)別
• 使用選擇器級別 3 和 4 規(guī)範(fàn)中引入的較新的偽類
• 計算特異性

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

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

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

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

如何計算 CSS 特異性？

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

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

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

當(dāng)兩個 CSS 規(guī)則具有相同的特異性時會發(fā)生什麼？

當(dāng)兩個 CSS 規(guī)則具有相同的特異性時，CSS 代碼中最後出現(xiàn)的規(guī)則將被應(yīng)用。這是因為 CSS 在處理具有相同特異性的規(guī)則時遵循“最後規(guī)則獲勝”的策略。

如何覆蓋 CSS 特異性？

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

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

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

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

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

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

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

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

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

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

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

以上是CSS選擇器：特異性的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！