當有多條沖突的CSS規則指向同一元素，則瀏覽器會計算特異性選擇更具體的規則。如果特異性相同，則按照代碼順序，靠后的規則覆蓋前面的規則。

樣式表IMPORTANCE比較

優先級由上往下遞減，如果重要性一致，則對比選擇器的特異性 Specificity，也叫“具體程度”.

1. 用戶聲明的!important
2. 作者聲明的!important
3. 作者樣式表
4. 用戶樣式表
5. 瀏覽器默認樣式表

特異性 Specificity

當有多條沖突的CSS規則指向同一元素，則瀏覽器會計算特異性選擇更具體的規則。

如果特異性相同，則按照代碼順序，靠后的規則覆蓋前面的規則。

特異性的計算：

計算下面三種情況的數量，并形成一個三元數。

1. IDs
2. 類，偽類，屬性
3. 標簽，偽元素

案例：

1. .button：(0, 1, 0)
2. nav#nav div.pull-right .button：(1, 2, 2) 一個ID，兩個類，兩個標簽
3. a：(0, 0, 1) 僅一個標簽
4. #nav a.button:hover：(1, 2, 1)

優先級比較：

從左往右比較，如果不同則直接得出優先級，如果相同則比較下一位。

\((1,2,2) > (1,2,1) > (0,1,0) > (0,0,1)\)

如果均相同，則按照代碼順序決定。

級聯與特異性總結

• 使用!important標記的聲明具有最高優先級；
• 非必要不使用!important，因為它會導致代碼可維護性很差；
• 內聯樣式的優先級永遠高于外部樣式表；
• 1個ID選擇器的特異性高于包含1000個類的選擇器；
• 1個類選擇器的特異性高于包含1000個元素的選擇器；
• 通配符 * 沒有特異性，(0, 0, 0)；
• 應使用特異性解決問題（計算樣式的優先級），而不是依賴代碼的順序；
• 當使用第三方樣式表的時候，最好將作者樣式表置于最后。