CSS 選擇器（Selector）的權(quán)重（Specificity）決定了對(duì)于同一元素，到底哪一條 CSS 規(guī)則會(huì)生效。且僅有當(dāng)多條 CSS 規(guī)則都對(duì)同一元素聲明了相應(yīng)樣式時(shí)，才會(huì)涉及到權(quán)重計(jì)算的問題。

選擇器的分類

正式計(jì)算選擇器權(quán)重之前，先來看選擇器是如何被分類的。

因?yàn)?CSS 選擇器眾多，在計(jì)算時(shí)，這些選擇器被歸為了三大類，按其權(quán)重由大到小依次為：

• ID 選擇器：比如 #dialog
• 元素類型選擇器（type selector）和偽選擇器（pseudo selector）：比如 h1，::before。
• 類名選擇器（class selector），屬性選擇器（attribute selector）及偽類選擇器（pseudo class selector） ：比如 .btn，[type="radio"]，:hover

其中兩類特殊的樣式會(huì)影響權(quán)重的生效，

• 一是內(nèi)聯(lián)樣式：style="color:red"。內(nèi)聯(lián)樣式始終擁有最高的權(quán)值，會(huì)覆蓋樣式文件的樣式。
• 另一個(gè)是 !important 修飾詞。應(yīng)用該修飾詞的規(guī)則權(quán)重會(huì)高于正常的規(guī)則，但不推薦。

其他選擇器，

• 全局選擇器：*
• 選擇連接符：+,>,-, ,||
• 偽類反向選擇器：:not()

以上，對(duì)權(quán)重的計(jì)算沒影響，即不參與計(jì)算。

權(quán)重的計(jì)算

根據(jù)以上對(duì)選擇器的分類，對(duì)任意樣式規(guī)則，可得到 (W,X,Y,Z) 這么一個(gè)值，其中，

• W：標(biāo)識(shí)是否有內(nèi)聯(lián)樣式
• X：ID 的數(shù)量
• Y：類名選擇器，屬性選擇器及偽類選擇器的數(shù)量
• Z：元素選擇器，偽選擇器 的數(shù)量

對(duì)于同一元素身上的多條樣式，對(duì)第條樣式規(guī)則計(jì)算出上面四個(gè)值，然后從左往右逐個(gè)比較，數(shù)字大的勝出。

如果權(quán)重全部一樣，后面的規(guī)則會(huì)生效。

示例

示例一

考察下面的示例代碼：

• 先來分析第一條規(guī)則 ul > li ，包含 2 個(gè)元素類型選擇器，得到的權(quán)值為 (0,0,0,2)。

• 再看 .list > .list-item，包含 2 個(gè)類名選擇器，權(quán)值為 (0,0,2,0)。

兩者一對(duì)比，在進(jìn)行到第三位時(shí)，后面的 2>0，所以后者勝出，它的樣式將生效，列表顏色為紅色。

示例二

• 首先 nav#nav > li:hover 規(guī)則中有 1 個(gè) ID 選擇器，2 個(gè)元素選擇器以及 1 個(gè)偽類選擇器，權(quán)值為 (0,1,1,2)

• li: nth-child(2):hover 中，2 個(gè)偽類選擇器和 1 個(gè)類型選擇器，權(quán)值為 (0,0,2,1)

一對(duì)比，前者勝出，因?yàn)楸容^到第二位時(shí)，前者是 1 后者是 0。只要有大于的情況，后面的值就不用比較了。

因此列表中元素在 hover 時(shí)，會(huì)是紫色（purple）。

相關(guān)資源

• MDN - Specificity
• Specifishity :: Specificity with Fish
• CSS Specificity
• Specifics on CSS Specificity