轉(zhuǎn)載聲明：此文章為轉(zhuǎn)載，點(diǎn)擊查看原文。
如有侵權(quán)24小時(shí)內(nèi)刪除。聯(lián)系QQ：1522025433
我們在使用CSS對網(wǎng)頁元素定義樣式時(shí)經(jīng)常會遇到這種情況：要對一般元素應(yīng)用一般樣式，然后在更特殊的元素上覆蓋它們。那么我們怎么樣來保證我們所新定義的元素樣式能覆蓋目標(biāo)元素上原有的樣式呢？ 在CSS中，會根據(jù)選擇器的特殊性來決定所定義的樣式規(guī)則的次序，具有更特殊選擇器的規(guī)則優(yōu)先于具有一般選擇器的規(guī)則，如果兩個(gè)規(guī)則的特殊性相同，那么后定義的規(guī)則優(yōu)先。
那么，又怎么來計(jì)算選擇器的特殊性呢？下面這張圖介紹了特殊性的計(jì)算方法：
4個(gè)等級的定義如下：
第一等：代表內(nèi)聯(lián)樣式，如: style=””，權(quán)值為1000。
第二等：代表ID選擇器，如：#content，權(quán)值為100。
第三等：代表類，偽類和屬性選擇器，如.content，權(quán)值為10。
第四等：代表類型選擇器和偽元素選擇器，如div p，權(quán)值為1。
例如上圖為例，其中#NAV為二等選擇器，.ACTIVE為三等選擇器，UL、LI和A為四等選擇器。則整個(gè)選擇器表達(dá)式的特殊性的值為1*100+1*10+3*1=113
下面是一些計(jì)算示例：
注意：通用選擇器（*），子選擇器（>）和相鄰?fù)x擇器（+）并不在這四個(gè)等級中，所以他們的權(quán)值都為0。
我們再來看一個(gè)具體的例子：假如有以下組樣式規(guī)則，你能判斷出HTML代碼中的兩個(gè)標(biāo)題是什么顏色嗎？
#content div#main-content h2{
color:red;
}
#content #main-content>h2{
color:blue
}
body #content div[id="main-content"] h2{
color:green;
}
#main-content div.paragraph h2{
color:orange;
}
#main-content [class="paragraph"] h2{
color:yellow;
}
div#main-content div.paragraph h2.first{
color:pink;
}
以下是HTML代碼：
<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)點(diǎn)</h2>
<p>1、表現(xiàn)和內(nèi)容相分離 2、提高頁面瀏覽速度 3、易于維護(hù)和改版 4、使用CSS布局更符合現(xiàn)在的W3C標(biāo)準(zhǔn).</p>
</div>
</div>
</div>
判斷出來了么？答案是：兩個(gè)標(biāo)題都是紅色的！
讓我們來一起算算六個(gè)樣式規(guī)則各自的特殊性的值：
第一個(gè)特殊性的值=2*100+2*1=202
第二個(gè)特殊性的值=2*100+1=201
第三個(gè)特殊性的值=1*100+1*10+3*1=113
第四個(gè)特殊性的值=1*100+1*10+2*1=112
第五個(gè)特殊性的值=1*100+1*10+1*1=111
第六個(gè)特殊性的值=1*100+2*10+3*1=123
清楚了吧，第一個(gè)樣式規(guī)則以其202的高分一舉奪得了本次樣式選擇器特殊性大賽的冠軍，后面一些規(guī)則雖然看起來好像更復(fù)雜，但特殊性并不是拼誰的選擇器表達(dá)式寫得更長，ID選擇器才是王道！
理解選擇器的特殊性很重要，特別是在修復(fù)bug的時(shí)候，因?yàn)槟阈枰私饽男┮?guī)則優(yōu)先及其原因。
如果你遇到了似乎沒有起作用的CSS規(guī)則，很可能是出現(xiàn)了特殊性沖突。請?jiān)谀愕倪x擇器中添加他的一個(gè)父元素的ID，從而提高它的特殊性。如果這能解決問題，就說明樣式表中其他地方很可能有更特殊的規(guī)則，它覆蓋了你的規(guī)則。如果是這種情況，你可能需要檢查代碼，解決特殊性沖突，讓代碼盡可能簡潔。
