認(rèn)識CSS權(quán)重 | 蛋糕仙人 · 技術(shù)人需要危機感

CSS權(quán)重是在使用CSS進行布局時經(jīng)常會遇到的一個問題，我們針對某一些元素應(yīng)用一些樣式，然后由于一些需求，使用更特殊的樣式來覆蓋以前的規(guī)則。所以，簡單來說CSS權(quán)重就是確定元素上的樣式應(yīng)用規(guī)則的。

什么是CSS權(quán)重

一般來說，我們會有兩條規(guī)則來確定CSS權(quán)重，

1. 從CSS代碼的所處位置來看CSS權(quán)重優(yōu)先級: 內(nèi)嵌樣式 > 內(nèi)部樣式表 > 外部樣式表。
2. 從樣式選擇器來看CSS權(quán)重優(yōu)先級： !important > 內(nèi)嵌樣式 > ID選擇器（#id） > class選擇器（.class） > 標(biāo)簽、偽類、屬性選擇器 > 偽元素 > 通配符（*） > 繼承。

根據(jù)W3C的規(guī)范，CSS權(quán)重分為四個級別，格式如下，

a,b,c,d

• a：使用了內(nèi)聯(lián)樣式，或者使用了!important
• b：形如#id的id選擇器
• c：包含形如.class的類選擇器、形如xx[xx=xx]的屬性選擇器、以及形如xx:hover的偽類
• d：包含標(biāo)簽選擇器、偽元素選擇器

各個權(quán)重位的高低關(guān)系是這樣的，a > b > c > d。

針對一個css樣式表達(dá)式，每滿足上述的一個規(guī)則，則將對應(yīng)的權(quán)重位增1（原始所有的權(quán)重位都默認(rèn)為0）。

權(quán)重的計算

不過上述W3C的文章中并沒有對下列的情況做出說明，如果不同的樣式表達(dá)式對同一個元素設(shè)置了不同的樣式，那么不同的樣式表達(dá)式各自的權(quán)重是如何計算的？

針對CSS權(quán)重，我們一般也會有兩條規(guī)則來確定到底應(yīng)用哪個樣式，

1. 權(quán)重高者將會被應(yīng)用
2. 權(quán)重相同，則后定義的樣式將會被應(yīng)用

出自國外的一篇文章《CSS: Specificity Wars》，現(xiàn)在有一種比較流行且容易理解的權(quán)重計算方案是這樣的，

將各個權(quán)重位從高到低抽象成彼此10進制的進位，即1000,100,10,1，那么CSS樣式表達(dá)式最終的權(quán)重為：a權(quán)重位上的數(shù)字x1000 + b權(quán)重位上的數(shù)字x100 + c權(quán)重位上的數(shù)字x10 + d權(quán)重位上的數(shù)字x1

如下圖，

總結(jié)起來就是這樣的，

舉個例子，比如下面的代碼，

body #main .report h1 {
    color: red
}

其權(quán)重為分別是: 0,1,1,2。（有一個id選擇器，1個類選擇器，2個標(biāo)簽選擇器），所以最終的權(quán)重為0x1000 + 1x100 + 1x10 + 2x1 = 112。

驗證demo

下面我們看個稍微復(fù)雜一點例子，來驗證一下這種權(quán)重計算方法是否是沒有問題。示例如下，

#content div#main-content h2 { /*202*/
    color:red;
}
#content #main-content>h2 { /*201*/
    color:blue
}
body #content div[id="main-content"] h2 { /*113*/
    color:green;
}
#main-content div.paragraph h2 { /*112*/
    color:orange;
}
#main-content [class="paragraph"] h2 { /*111*/
    color:yellow;
}
div#main-content div.paragraph h2.first { /*123*/
    color:pink;
}

這里我已經(jīng)在css代碼注釋中給出各個樣式表達(dá)式的權(quán)重了，各位看官可以自己驗證一下。

<div id="content">
    <div id="main-content">
        <h2>CSS簡介</h2>
        <p>CSS（Cascading Style Sheet，可譯為“層疊樣式表”或“級聯(lián)樣式表”）是一組格式設(shè)置規(guī)則，用于控制Web頁面的外觀。</p>
        <div class="paragraph">
            <h2 class="first">使用CSS布局的優(yōu)點</h2>
            <p>1、表現(xiàn)和內(nèi)容相分離 2、提高頁面瀏覽速度 3、易于維護和改版 4、使用CSS布局更符合現(xiàn)在的W3C標(biāo)準(zhǔn).</p>
        </div>
    </div>
</div>

那么問題來了。html代碼中的兩個h2前提將會渲染成什么顏色呢？

如果你已經(jīng)知道答案了，可以到這里看這個demo的在線預(yù)覽，驗證下自己的結(jié)論。

額外的問題

個人覺得理解CSS的權(quán)重特性是非常有用處的，比如可以壓縮樣式表達(dá)式的長度等。

這里，可能會有人對CSS權(quán)重的進制式有點疑問。

比如某個css表達(dá)式A最終權(quán)重是0,1,0,0，同時還有個css表達(dá)式B的最終權(quán)重0,0,11,0，那么按照進制式的算法，表達(dá)式A和B的權(quán)重分為別100和110。然后我們就可以得出結(jié)論，說因為B的權(quán)重因為比A大，所以元素將會渲染成B的樣式。

其實這是不正確的。

我們說進制式的權(quán)重計算方案只是一種抽象，適用于大部分情況。但是也偶有例外，比如上面提到的這個例子。

W3C官方給出的權(quán)重方案中規(guī)定，

• 依次比較a,b,c,d，同位相同則再比較下一個。只要得到某一位較大者即停止繼續(xù)往下比較。
• 若a,b,c,d都相同，則應(yīng)用最后定義的樣式

所以，權(quán)重并不是十進制的，而是不進制的。

參考列表

• http://www.w3.org/TR/CSS2/cascade.html#specificity
• CSS選擇器的權(quán)重詳解
• CSS: Specificity Wars
• CSS選擇器的權(quán)重與優(yōu)先規(guī)則
• 你應(yīng)該知道的一些事情——CSS權(quán)重
• 重新認(rèn)識CSS的權(quán)重