我們?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á)式的特殊性的值為1*100+1*10+3*1=113

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



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

以下是HTML代碼：
判斷出來(lái)了么？答案是：兩個(gè)標(biāo)題都是紅色的！
讓我們來(lái)一起算算六個(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ī)則雖然看起來(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)潔。

最新評(píng)論