important > 內(nèi)聯(lián) > ID > 類 > 標(biāo)簽 | 偽類 | 屬性選擇 > 偽對(duì)象 > 繼承 > 通配符”
我們?cè)谑褂肅SS對(duì)網(wǎng)頁(yè)元素定義樣式時(shí)經(jīng)常會(huì)遇到這種情況：要對(duì)一般元素應(yīng)用一般樣式，然后在更特殊的元素上覆蓋它們。那么我們?cè)趺礃觼?lái)保證我們所新定義的元素樣式能覆蓋目標(biāo)元素上原有的樣式呢？
在CSS中，會(huì)根據(jù)選擇器的特殊性來(lái)決定所定義的樣式規(guī)則的次序，具有更特殊選擇器的規(guī)則優(yōu)先于具有一般選擇器的規(guī)則，如果兩個(gè)規(guī)則的特殊性相同，那么后定義的規(guī)則優(yōu)先。
那么，又怎么來(lái)計(jì)算選擇器的特殊性呢？下面這張圖介紹了特殊性的計(jì)算方法：
我們把特殊性分為4個(gè)等級(jí)，每個(gè)等級(jí)代表一類選擇器，每個(gè)等級(jí)的值為其所代表的選擇器的個(gè)數(shù)乘以這一等級(jí)的權(quán)值，最后把所有等級(jí)的值相加得出選擇器的特殊值。
4個(gè)等級(jí)的定義如下：
第一等：代表內(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á)式的特殊性的值為1100+110+3*1=113
下面是一些計(jì)算示例：
注意：通用選擇器（*），子選擇器（>）和相鄰?fù)x擇器（+）并不在這四個(gè)等級(jí)中，所以他們的權(quán)值都為0。
我們?cè)賮?lái)看一個(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簡(jiǎn)介</h2>
<p>CSS（Cascading Style Sheet，可譯為“層疊樣式表”或“級(jí)聯(lián)樣式表”）是一組格式設(shè)置規(guī)則，用于控制Web頁(yè)面的外觀。</p>
<div class="paragraph">
<h2 class="first">使用CSS布局的優(yōu)點(diǎn)</h2>
<p>1、表現(xiàn)和內(nèi)容相分離 2、提高頁(yè)面瀏覽速度 3、易于維護(hù)和改版 4、使用CSS布局更符合現(xiàn)在的W3C標(biāo)準(zhǔn).</p>
</div>
</div>
</div>
判斷出來(lái)了么？答案是：兩個(gè)標(biāo)題都是紅色的！
讓我們來(lái)一起算算六個(gè)樣式規(guī)則各自的特殊性的值：
第一個(gè)特殊性的值=2100+21=202
第二個(gè)特殊性的值=2100+1=201
第三個(gè)特殊性的值=1100+110+31=113
第四個(gè)特殊性的值=1100+110+21=112
第五個(gè)特殊性的值=1100+110+11=111
第六個(gè)特殊性的值=1100+210+3*1=123
清楚了吧，第一個(gè)樣式規(guī)則以其202的高分一舉奪得了本次樣式選擇器特殊性大賽的冠軍，后面一些規(guī)則雖然看起來(lái)好像更復(fù)雜，但特殊性并不是拼誰(shuí)的選擇器表達(dá)式寫得更長(zhǎng)，ID選擇器才是王道！
理解選擇器的特殊性很重要，特別是在修復(fù)bug的時(shí)候，因?yàn)槟阈枰私饽男┮?guī)則優(yōu)先及其原因。
如果你遇到了似乎沒(méi)有起作用的CSS規(guī)則，很可能是出現(xiàn)了特殊性沖突。請(qǐng)?jiān)谀愕倪x擇器中添加他的一個(gè)父元素的ID，從而提高它的特殊性。如果這能解決問(wèn)題，就說(shuō)明樣式表中其他地方很可能有更特殊的規(guī)則，它覆蓋了你的規(guī)則。如果是這種情況，你可能需要檢查代碼，解決特殊性沖突，讓代碼盡可能簡(jiǎn)潔。
