CSS選擇器的權重與優先規則

在CSS中，會根據選擇器的特殊性來決定所定義的樣式規則的次序，具有更特殊選擇器的規則優先於具有一般選擇器的規則，如果兩個規則的特殊性相同，那麼後定義的規則優先 我們在使用CSS對網頁元素定義樣式時經常會遇到這種情況：要對一般元素套用一般樣式，然後在更特殊的元素上覆寫它們。那我們怎麼樣來確保我們所新定義的元素樣式能涵蓋目標元素上原有的樣式呢？

在CSS中，會根據選擇器的特殊性來決定所定義的樣式規則的次序，具有更特殊選擇器的規則優先於具有一般選擇器的規則，如果兩個規則的特殊性相同，那麼後定義的規則優先。

那麼，又要怎麼計算選擇器的特殊性呢？下面這張圖介紹了特殊性的計算方法：



我們把特殊性分成4個等級，每個等級代表一類選擇器，每個等級的值為其所代表的選擇器的個數乘以此等級的權值，最後將所有等級的值相加得出選擇器的特殊值。

4個等級的定義如下：

第一等：代表內聯樣式，如: style=””，權值為1000。
第二等：代表ID選擇器，如：#content，權值為100。
第三等：代表類，偽類和屬性選擇器，如.content，權值為10。
第四等：代表類型選擇器和偽元素選擇器，如p p，權值為1。

例如上圖為例，其中#NAV為二等選擇器，.ACTIVE為三等選擇器，UL、LI和A為四等選擇器。則整個選擇器表達式的特殊性的值為1*100+1*10+3*1=113

下面是一些計算範例：



注意：通用選擇器（*），子選擇器（>）和相鄰同胞選擇器（+）並不在這四個等級中，所以他們的權值都為0。
我們再來看一個具體的例子：假如有以下組樣式規則，你能判斷出HTML程式碼中的兩個標題是什麼顏色嗎？

#content p#main-content h2{   
    color:red;   
}   

#content #main-content>h2{   
    color:blue
}   
body #content p[id="main-content"] h2{   
    color:green;   
}   

#main-content p.paragraph h2{   
    color:orange;   
}   
#main-content [class="paragraph"] h2{   
    color:yellow;   
}   
p#main-content p.paragraph h2.first{   
    color:pink;   
}

以下是HTML程式碼：

<p id="content">
    <p id="main-content">
        <h2 id="CSS简介">CSS简介</h2>
        <p>CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。</p>
        <p class="paragraph">
            <h2 id="使用CSS布局的优点">使用CSS布局的优点</h2>
            <p>1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版 4、使用CSS布局更符合现在的W3C标准.</p>
        </p>
    </p>
</p>

判斷出來了麼？答案是：兩個標題都是紅色的！
讓我們來一起算出六個樣式規則各自的特殊性的值：
第一個特殊性的值=2*100+2*1=202
第二個特殊性的值=2*100+1=201
第三個特殊性的值=1*100+1*10+3*1=113
第四個特殊性的值=1*100+1*10 +2*1=112
第五個特殊性的值=1*100+1*10+1*1=111
第六個特殊性的值=1*100+2*10+3 *1=123
清楚了吧，第一個樣式規則以其202的高分一舉奪得了本次樣式選擇器特殊性大賽的冠軍，後面一些規則雖然看起來好像更複雜，但特殊性並不是拼誰的選擇器表達式寫得更長，ID選擇器才是王道！
理解選擇器的特殊性很重要，特別是在修復bug的時候，因為你需要了解哪些規則優先及其原因。
如果你遇到了似乎沒有起作用的CSS規則，很可能是出現了特殊性衝突。請在你的選擇器中加入他的一個父元素的ID，從而提高它的特殊性。如果這能解決問題，就說明樣式表中其他地方很可能有更特殊的規則，它涵蓋了你的規則。如果是這種情況，你可能需要檢查程式碼，解決特殊性衝突，讓程式碼盡可能簡潔。

更多CSS選擇器的權重與優先規則相關文章請關注PHP中文網！