當有多條衝突的CSS規則指向同一元素，則瀏覽器會計算特異性選擇更具體的規則。如果特異性相同，則按照代碼順序，靠後的規則覆蓋前面的規則。 ...
樣式表IMPORTANCE比較
優先順序由上往下遞減，如果重要性一致，則對比選擇器的特異性 Specificity，也叫“具體程度”.
- 用戶聲明的
!important - 作者聲明的
!important - 作者樣式表
- 用戶樣式表
- 瀏覽器預設樣式表
特異性 Specificity
當有多條衝突的CSS規則指向同一元素，則瀏覽器會計算特異性選擇更具體的規則。
如果特異性相同，則按照代碼順序，靠後的規則覆蓋前面的規則。
特異性的計算：
計算下麵三種情況的數量，並形成一個三元數。
- IDs
- 類，偽類，屬性
- 標簽，偽元素
案例：
.button：(0, 1, 0)nav#nav div.pull-right .button：(1, 2, 2) 一個ID，兩個類，兩個標簽a：(0, 0, 1) 僅一個標簽#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)； - 應使用特異性解決問題（計算樣式的優先順序），而不是依賴代碼的順序；
- 當使用第三方樣式表的時候，最好將作者樣式表置於最後。
