完全搞清楚css權重

什麼是css權重

一個元素有多個樣式對他進行設置的時候，那麼哪一個樣式會起做用呢？這就須要一個規則計算，這個規則就是權重。誰的權重大，就使用那個樣式。

根據w3c的規範，元素分爲三個等級：

• id選擇器（稱之爲 a等級）
• 類選擇器，屬性選擇器，僞類(咱們稱之爲b等級)
• 標籤，僞元素（咱們稱之爲c等級）

計算權重

咱們按照剛纔的規則進行分類計算，計算一下有幾個a，幾個 b ， 幾個 c 。

示例：

body #content .data img:hover
複製代碼

這個按照a,b,c這種格式計算的結果就是：1,2,2。

咱們來分析一下。

有1個a： #content 。

有2個b：一個class：.data , 一個僞類：:hover。

有2個 c：body 和 img

那咱們再來看幾個例子：

// 0,0,2（一個標籤，一個僞元素）
li:first-line
複製代碼

// 0,1,1（一個屬性選擇器，一個標籤）
h1 + *[rel=up]
複製代碼

// 1,1,2(一個id選擇器，一個類選擇器，2個標籤)
body #darkside .sith p
複製代碼

使用方法。

如今咱們已經知道怎麼計算權重了，下一步咱們就看看怎麼來比較誰的權重大誰的權重小。權重大的樣式會起做用。

首先比較第一個等級a ，誰的 a 的個數多權重就大。若是 a的個數同樣，則比較 b，跟 a的規則同樣，誰的b的個數多，誰的權重就大。若是同樣在比較 c。同樣的規則。

這樣的話，誰的權重大，誰就對元素起做用。

若是最後abc 都同樣怎麼辦，那就比較誰最後寫的，通常後面寫的會覆蓋前面的樣式。

好比：

body div{
    background: blue
}
 
div{
    background: red;
}
複製代碼

以上兩個樣式，blue 會起做用。

!important 和 行內樣式

除了以上三個等級以外，咱們還有另外兩個，一個是行內樣式，一個是 !important 。

而行內樣式 比 ID選擇器高一級，!important 比行內樣式又高一級。

等級關係

因此最終等級比較是：

!important > 行內樣式 > ID選擇器 > 類選擇器 | 屬性選擇器| 僞類選擇器 > 標籤|僞元素

經過上面的方法，咱們就能夠計算出權重，比較大小。就能夠知道那個樣式會起做用了。

建議

• 通常不推薦使用!important ，他的等級過高。後期若是對元素有修改很難突破。
• 能不用id，就儘可能不使用。

最後神器

最後推薦一個特別棒的工具，你能夠輸入選擇器，而後計算權重。也能夠對多個權重進行排序。

若是不清楚哪一個權重更大，使用這個工具能夠一目瞭然，也方便咱們對權重的學習。

結語

若是你們發現有什麼錯誤的地方，歡迎指正。但願能給你們帶來一點收穫。

參考資料：

• www.w3.org/TR/selector…

• www.smashingmagazine.com/2007/07/css…