css權重

一、什麼是css權重？css6大基礎選擇器

css權重指的是css6大基礎選擇符的優先級，優先級高的css樣式會覆蓋優先級底的css樣式，優先級越高說明權重越高，反之亦然。

css6大基礎選擇器：

a）、id選擇器(#box{})
b）、類選擇器(.box{})
c）、屬性選擇器(a[href="http://www.xxx.com"])
d）、僞類和僞對象選擇器(:hoevr{}和::after{})
e）、標籤類型選擇器(div{})
f）、通配符選擇器(*{})

二、css權重計算規則

計算css權重是有必定規則的，根據w3c制定的css規範，css權重計算規則以下：

a）、計算選擇符中的id選擇器的數量
    一個id選擇器爲一個a，一個a爲100
    
b）、計算選擇符中的類選擇器、屬性選擇器以及僞類選擇器的數量
    一個類選擇器、屬性選擇器以及僞類選擇器爲一個b，一個b爲10
    
c）、計算標籤類型選擇器和僞對象選擇器的數量
    一個標籤類型選擇器、僞對象選擇器爲一個c，一個c爲1
    
d）、忽略通配符選擇器
    通配符選擇器忽略不計

以下面這張圖就是一個css選擇器權重的例子：

若是兩個選擇符的權重相同，則可依照」就進原則」來判斷，最後定義的選擇符會被採用。但儘可能避免出現這種依靠定義的順序決定選擇符優先級的狀況，由於在後續的維護中很難保證定義的順序不會被打亂。