2019獨角獸企業重金招聘Python工程師標準>>>

我們在使用CSS對網頁元素定義樣式時經常會遇到這種情況：要對一般元素應用一般樣式，然后在更特殊的元素上覆蓋它們。那么我們怎么樣來保證我們所新定義的元素樣式能覆蓋目標元素上原有的樣式呢？

? ?

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

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

? ?

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

4個等級的定義如下：

第一等：代表內聯樣式，如: style=””，權值為1000。

第二等：代表ID選擇器，如：#content，權值為100。

第三等：代表類，偽類和屬性選擇器，如.content，權值為10。

第四等：代表類型選擇器和偽元素選擇器，如div ?p，權值為1。

? ?

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

下面是一些計算示例：

? ?

注意：通用選擇器（*），子選擇器（>）和相鄰同胞選擇器（+）并不在這四個等級中，所以他們的權值都為0。

我們再來看一個具體的例子：假如有以下組樣式規則，你能判斷出HTML代碼中的兩個標題是什么顏色嗎？

01	#content div#main-content h2{

02	????color:red;

03

}

04

05	#content #main-content>h2{

06	????color:blue

07

}

08	body #content div[id="main-content"] h2{

09	????color:green;

10

}

11

12	#main-content div.paragraph h2{

13	????color:orange;

14

}

15	#main-content [class="paragraph"] h2{

16	????color:yellow;

17

}

18	div#main-content div.paragraph h2.first{

19	????color:pink;

20

}

以下是HTML代碼：

01	<div id="content">

02	????<div id="main-content">

03	????????<h2>CSS簡介</h2>

04	????????<p>CSS（Cascading Style Sheet，可譯為“層疊樣式表”或“級聯樣式表”）是一組格式設置規則，用于控制Web頁面的外觀。</p>

05	????????<div class="paragraph">

06	????????????<h2 class="first">使用CSS布局的優點</h2>

07	????????????<p>1、表現和內容相分離 2、提高頁面瀏覽速度 3、易于維護和改版 4、使用CSS布局更符合現在的W3C標準.</p>

08	????????</div>

09	????</div>

判斷出來了么？答案是：兩個標題都是紅色的！

讓我們來一起算算六個樣式規則各自的特殊性的值：

• 第一個特殊性的值=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，從而提高它的特殊性。如果 這能解決問題，就說明樣式表中其他地方很可能有更特殊的規則，它覆蓋了你的規則。如果是這種情況，你可能需要檢查代碼，解決特殊性沖突，讓代碼盡可能簡 潔。

轉載于:https://my.oschina.net/F08zhoubo/blog/300174

總結

以上是生活随笔為你收集整理的CSS选择器的权重与优先规则的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。