CSS 選擇器權重計算規則

CSS 選擇器（Selector）的權重（Specificity）決定了對于同一元素，到底哪一條 CSS 規則會生效。且僅有當多條 CSS 規則都對同一元素聲明了相應樣式時，才會涉及到權重計算的問題。

選擇器的分類

正式計算選擇器權重之前，先來看選擇器是如何被分類的。

因為 CSS 選擇器眾多，在計算時，這些選擇器被歸為了三大類，按其權重由大到小依次為：

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

其中兩類特殊的樣式會影響權重的生效，

• 一是內聯樣式：style="color:red"。內聯樣式始終擁有最高的權值，會覆蓋樣式文件的樣式。
• 另一個是 !important 修飾詞。應用該修飾詞的規則權重會高于正常的規則，但不推薦。

其他選擇器，

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

以上，對權重的計算沒影響，即不參與計算。

權重的計算

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

• W：標識是否有內聯樣式
• X：ID 的數量
• Y：類名選擇器，屬性選擇器及偽類選擇器的數量
• Z：元素選擇器，偽選擇器 的數量

對于同一元素身上的多條樣式，對第條樣式規則計算出上面四個值，然后從左往右逐個比較，數字大的勝出。

如果權重全部一樣，后面的規則會生效。

示例

示例一

考察下面的示例代碼：

<ul class="list"><li class="list-item">item1</li><li class="list-item">item2</li><li class="list-item">item3</li>
</ul>

ul > li {color: blue
}.list > .list-item {color: red;
}

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

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

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

示例二

<nav id="nav"><ul><li>1</li><li>2</li><li>3</li></ul>
</nav>

nav#nav > li:hover{color: purple;
}li: nth-child(2):hover{color:pink;
}

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

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

一對比，前者勝出，因為比較到第二位時，前者是 1 后者是 0。只要有大于的情況，后面的值就不用比較了。

因此列表中元素在 hover 時，會是紫色（purple）。

相關資源

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