CSS選擇器的權(quán)重與優(yōu)先規(guī)則

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

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

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

4個等級的定義如下：

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

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

下面是一些計(jì)算示例：

注意：通用選擇器（*），子選擇器（>）和相鄰?fù)x擇器（+）并不在這四個等級中，所以他們的權(quán)值都為0。
我們再來看一個具體的例子：假如有以下組樣式規(guī)則，你能判斷出HTML代碼中的兩個標(biāo)題是什么顏色嗎？

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

判斷出來了么？答案是：兩個標(biāo)題都是紅色的！
讓我們來一起算算六個樣式規(guī)則各自的特殊性的值：
第一個特殊性的值=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
清楚了吧，第一個樣式規(guī)則以其202的高分一舉奪得了本次樣式選擇器特殊性大賽的冠軍，后面一些規(guī)則雖然看起來好像更復(fù)雜，但特殊性并不是拼誰的選擇器表達(dá)式寫得更長，ID選擇器才是王道！
理解選擇器的特殊性很重要，特別是在修復(fù)bug的時候，因?yàn)槟阈枰私饽男┮?guī)則優(yōu)先及其原因。
如果你遇到了似乎沒有起作用的CSS規(guī)則，很可能是出現(xiàn)了特殊性沖突。請?jiān)谀愕倪x擇器中添加他的一個父元素的ID，從而提高它的特殊性。如果這能解決問題，就說明樣式表中其他地方很可能有更特殊的規(guī)則，它覆蓋了你的規(guī)則。如果是這種情況，你可能需要檢查代碼，解決特殊性沖突，讓代碼盡可能簡潔。

更多CSS選擇器的權(quán)重與優(yōu)先規(guī)則相關(guān)文章請關(guān)注PHP中文網(wǎng)！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com