在編寫CSS代碼的時候,我們會出現多個樣式規則作用于用一個元素的情況,例如
以上三個樣式規則都會作用于 ID 值為 "navigation" 的 nav 標簽,最終哪個樣式規則會生效呢,這取決于選擇器的特殊性(或優先級)高低,選擇器特殊性高的樣式會覆蓋特殊性低的樣式,經過測試 nav 標簽的背景會顯示為 green 綠色。
那么選擇器特殊性是如何計算的呢?
通常,我們使用四個以逗號分隔的數字來表示特殊性,比如:
1.每個元素選擇器貢獻特殊性為 0,0,0,1;
2.每個類、偽類或者屬性選擇器的特殊性為 0,0,1,0;
3.每個ID選擇器的特殊性為 0,1,0,0.
計算一個組合選擇器的特殊性的時候就先計算各種選擇器的數量以及對應的特殊性再相加,比如
注:多類選擇器有多少個類就計算多少個類,不支持多類選擇器的 IE6 會理解為一個類
比較選擇器特殊性高低直接從左向右依次比較,數字大的則優先級更高,如果相同就比較下一位,所有位都相同則優先級是一樣高,當選擇器優先級一樣高的時候后申明的樣式會覆蓋前面申明的樣式
每個級別的優先級值是相互獨立的,13個元素選擇器寫在一堆也不會比1個類選擇器的特殊性高
第一個0是用于行內樣式的,且僅用于行內樣式