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）。