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

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

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

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

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

注意：計(jì)算特異性

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

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

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

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

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

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

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

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

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

我們?cè)诘?2 章中討論了保持低特異性的策略。

結(jié)論

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

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

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

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

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

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

如何計(jì)算 CSS 特異性？

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

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

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

當(dāng)兩個(gè) CSS 規(guī)則具有相同的特異性時(shí)會(huì)發(fā)生什么？

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

如何覆蓋 CSS 特異性？

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

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

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

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

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

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

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

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

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

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

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

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