CSS選擇器特殊性與重要性

特殊性

在編寫CSS代碼的時候，咱們會出現多個樣式規則做用於同一個元素的狀況，例如

<!-- HTML -->
<header>
  <nav class="nav-main" id="navigation">Here background</nav>
</header>

/* CSS */
header nav {
  background-color: red;
}

#navigation {
  background-color: green;
}

.nav-main {
  background-color: blue;
}

以上三個樣式規則都會做用於 ID 值爲 "navigation" 的 nav 標籤，最終哪一個樣式規則會生效呢，這取決於選擇器的特殊性(或優先級)高低，選擇器特殊性高的樣式會覆蓋特殊性低的樣式，通過測試 nav 標籤的背景會顯示爲 green 綠色。

那麼選擇器特殊性是如何計算的呢？

一般，咱們使用四個以逗號分隔的數字來表示特殊性，好比:

1. 每一個元素或僞元素選擇器貢獻特殊性爲 0，0，0，1
2. 每一個類、僞類或者屬性選擇器的特殊性爲 0，0，1，0
3. 每一個ID選擇器的特殊性爲 0，1，0，0
4. 結合符和通配符的對特殊性沒有貢獻 

計算一個組合選擇器的特殊性的時候就先計算各類選擇器的數量以及對應的特殊性再相加，好比

 

div ul li              /* 0,0,0,3    3個元素選擇器 */

div.aside ol li        /* 0,0,1,3    1個類選擇器，3個元素選擇器 */

a:hover                /* 0,0,1,1    1個僞類選擇器，1個元素選擇器 */

div.navlinks a:hover   /* 0,0,2,2    1個類選擇器，1個僞類選擇器，2個元素選擇器 */

.affix.top             /* 0,0,2,0    多類選擇器 注 */

input[type="text"]     /* 0,0,1,1 1個屬性選擇器，1個元素選擇器 */ input[name="sex"][type="radio"]
 /* 0,0,2,1 2個屬性選擇器，1個元素選擇器 */ #title em /* 0,1,0,1 1個 ID 選擇器，1個元素選擇器 */ h1#title em /* 0,1,0,2 1個 ID 選擇器，2個元素選擇器 */ * /* 0,0,0,0 1個通用選擇器 */

注：多類選擇器有多少個類就計算多少個類，不支持多類選擇器的 IE6 會理解爲一個類

比較選擇器特殊性高低直接從左向右依次比較，數字大的則優先級更高，若是相同就比較下一位，全部位都相同則優先級是同樣高，當選擇器優先級同樣高的時候後申明的樣式會覆蓋前面申明的樣式

每一個級別的優先級值是相互獨立的，13個元素選擇器寫在一堆也不會比1個類選擇器的特殊性高

第一個0是用於行內樣式的，且僅用於行內樣式

<nav style="background-color: gray;"></nav> <!-- 1,0,0,0 -->

 

重要性

有同樣東西能夠無視特殊性，那就是 !important。使用 !important 能夠把任何樣式規則標記爲重要

.nav-main {
  background-color: blue !important;
  color: #666;
}

基本上，任何重要的樣式規則均可以覆蓋沒有標記爲重要的樣式規則，

<div id="gohome"><a href="/" id="home">Home</a></div>

div#gohome a#home {
  color: red;
}

div a {
  color: green !important;
}

上面的代碼會獲得一個綠色 green 的連接，第一個規則有很是高的特殊性（0,2,0,2），

可是在 !important 面前同樣沒用，除非咱們給第一個規則也標記爲重要

div#gohome a#home {
  color: red !important;
}

div a {
  color: green !important;
}

這時候連接就變爲紅色 red 了，都標記爲重要的狀況下，則會使用前面提到的特殊性規則來解決，

因此使用 !important 的時候應當權衡，儘可能不要用

另外，IE6 是支持 !important 的，只是不徹底支持而已，當在同一個選擇器中，在標記爲重要的樣式規則以後又從新定義了此樣式則 !important 將失效

.header {
  color: red !important;     /* 標準瀏覽器 red */
  color: green;              /* IE6 green !important 失效 */
}

再有就是 IE6/7 能夠容許在 !important 後面添加一些文字，依然能識別

.header {
  color: red !important ie;     /* ie6/7 red */
}