CSS樣式優(yōu)先級是怎樣劃分的？
定義CSS樣式時，經(jīng)常出現(xiàn)兩個或更多樣式規(guī)則應(yīng)用在同一元素上的情況。此時CSS就會根據(jù)樣式規(guī)則的權(quán)重，優(yōu)先顯示權(quán)重最高的樣式。CSS優(yōu)先級指的就是CSS樣式規(guī)則的權(quán)重。在網(wǎng)頁制作中，CSS為每個基礎(chǔ)選擇器都指定了不同的權(quán)重，方便我們添加樣式代碼。為了深入理解CSS優(yōu)先級，我們通過一段示例代碼進(jìn)行分析。CSS樣式代碼如下：
p{ color:red;} ? ? ? ? ? /*標(biāo)簽樣式*/
.blue{ color:green;} ? ? /*class樣式*/
theader{ color:blue;} ? ?/*id樣式*/
CSS樣式代碼對應(yīng)的HTML結(jié)構(gòu)為：
<p class="blue" id="header">
? ?幫幫我，我到底顯示什么顏色?</p>
在上面的示例代碼中，使用不同的選擇器對同一個元素設(shè)置文本顏色，這時瀏覽器會根據(jù)CSS選擇器的優(yōu)先級規(guī)則解析CSS樣式。為了便于判斷元素的優(yōu)先級，CSS為每一種基礎(chǔ)選擇器都分配了一個權(quán)重，我們可以通過虛擬數(shù)值的方式為這些基礎(chǔ)選擇器匹配權(quán)重。假設(shè)標(biāo)簽選擇器具有權(quán)重為1.類選擇器具有權(quán)重則為10，id選擇器具有權(quán)重則為l00。這樣id選擇器“#header”就具有最大的優(yōu)先級，因此文本顯示為藍(lán)色。
對于由多個基礎(chǔ)選擇器構(gòu)成的復(fù)合選擇器(并集選擇器除外)，其權(quán)重可以理解為這些基礎(chǔ)選擇器權(quán)重的疊加。例如，下面的CSS代碼。
p strong{color:black} ? ? ? ? ? ?/*權(quán)重為：1+1*/
strong.blue{color:green;} ? ? ? ?/*權(quán)重為：1+10*/
.father strong{color:yellow} ? ? /*權(quán)重為：10+1*/
p.father strong{color:orange;} ? /*權(quán)重為：1+10+1*/
p.father .blue{color:gold;} ? ? ?/*權(quán)重為：1+10+10*/
theader strong{color:pink;} ? ? ?/*權(quán)重為：100+1*/
#header strong.blue{color:red;} ?/*權(quán)重為：100+1+10*/
對應(yīng)的HTML結(jié)構(gòu)為：
<p class="father" id="header">
? ?<strong class="blue">文本的顏色</strong></p>
這時，CsS代碼中的“#header strong.blue”選擇器的權(quán)重最高，文本顏色將顯示為紅色。此外，在考慮權(quán)重時，我們還需要注意一些特殊的情況。
(1)繼承樣式的權(quán)重為0
在嵌套結(jié)構(gòu)中、h不管父元素樣式的權(quán)重多大，被子元素繼承時，它的權(quán)重都為0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。例如，下面的CSS樣式代碼。
strong{color:red;}
#header{color:green;}
CSS樣式代碼對應(yīng)的HTML結(jié)構(gòu)如下：
<p id="header" class="blue">
?<strong>繼承樣式不如自己定義的權(quán)重大</strong></p>
在上面的代碼中，雖然“#header”具有權(quán)重100，但被標(biāo)簽繼承時權(quán)重為0。而“strong”選擇器的權(quán)重雖然僅為1，但它大于繼承樣式的權(quán)重，所以頁面中的文本顯示為紅色。
(2)行內(nèi)樣式優(yōu)先
應(yīng)用style屬性的元素，其行內(nèi)樣式的權(quán)重非常高。換算為數(shù)值，我們可以理解為遠(yuǎn)大于100。因此行內(nèi)樣式擁有比上面提到的選擇器都高的優(yōu)先級。
(3)權(quán)重相同時，CSS的優(yōu)先級遵循就近原則
也就是說，靠近元素的樣式具有最大的優(yōu)先級，或者說按照代碼排列上下順序，排在最下邊的樣式優(yōu)先級最大。例如，下面為外部定義的CSS示例代碼。
/*CSS文檔,文件名為style_red.css*/
#header{color:red;} ? ? ? ? ? ? ? ? ? ? /*外部樣式*/
對應(yīng)的HTML結(jié)構(gòu)代碼如下：
<title>CSS優(yōu)先級</title><link rel="stylesheet"href="style_red.css"type="text/css"/> /*引入外部
定義的CSS代碼*/<style type="text/css">#header{color:gray;}</style></head><body>/*內(nèi)嵌式樣式*/<p id="header">權(quán)重相同時，就近優(yōu)先</p></body>
在上面的示例代碼中，第2行代碼通過外鏈?zhǔn)揭隒SS樣式，該樣式設(shè)置文本樣式顯示為紅色。第3~5行代碼通過內(nèi)嵌式引入CSS樣式，該樣式設(shè)置文本樣式顯示為灰色。
上面的頁面被解析后，段落文本將顯示為灰色，即內(nèi)嵌式樣式優(yōu)先。這是因?yàn)閮?nèi)嵌樣式比外鏈?zhǔn)綐邮礁拷麳TML.元素。同樣的道理，如果同時引用兩個外部樣式表，則排在下面的樣式表具有較大的優(yōu)先級。如果此時將內(nèi)嵌樣式更改為：
p{color:gray;} ? ? ? ? ? ? ? ? ? /*內(nèi)嵌式樣式*/
此時外鏈?zhǔn)降膇d選擇器和嵌入式的標(biāo)簽選擇器權(quán)重不同，“#header”的權(quán)重更高，文字將顯示為外部樣式定義的紅色。
(4)CSS定義“l(fā)important”命令，會被賦予最大的優(yōu)先級
當(dāng)CSS定義了“l(fā)important”命令后，將不再考慮權(quán)重和位置關(guān)系，使用“l(fā)important”的標(biāo)簽都具有最大優(yōu)先級。例如，下面的示例代碼。
#header{color:red!important;}
應(yīng)用此樣式的段落文本顯示為紅色，因?yàn)椤發(fā)important”命令的樣式擁有最大的優(yōu)先級。需要注意的是，“l(fā)important”命令必須位于屬性值和分號之間，否則無效。
復(fù)合選擇器的權(quán)重為組成它的基礎(chǔ)選擇器權(quán)重的疊加，但是這種疊加并不是簡單的數(shù)字之和。下面通過一個案例來具體說明，如例1所示。
例1 examplel1.html
<!doctype html><html><head><meta charset="utf-8"><title>復(fù)合選擇器權(quán)重的疊加</title><style type="text/css">.inner{text-decoration:line-through;}/*類選擇器定義刪除線，權(quán)重為10*/div div div div div div div div div div div{text-decoration:underline;}/*后代選擇器定義下畫線，權(quán)重為11個1的疊加*/
</style></head><body><div>
?<div><div><div><div><div><div><div><div><div>
? ? <div class="inner">文本的樣式</div>
?</div></div></div></div></div></div></div></div></div></div></body></html>
例1共使用了11對<div>標(biāo)簽，它們層層嵌套。第15行代碼我們對最里層的<div>定義類名“inner”。第7、8行代碼，使用類選擇器和后代選擇器分別定義最里層div的樣式。此時瀏覽器中文本的樣式到底如何顯示呢?如果僅僅將基礎(chǔ)選擇器的權(quán)重相加，后代選擇器(包含11層div)的權(quán)重為11，大于類選擇器“.inner”的權(quán)重10，文本將添加下畫線。
運(yùn)行例1，效果如下所示。
在上圖中，文本并沒有像預(yù)期的那樣添加下畫線，而顯示了類選擇器“.inner”定義的刪除線?？梢姡瑹o論在外層添加多少個標(biāo)簽，復(fù)合選擇器的權(quán)重?zé)o論為多少個<div>標(biāo)簽選擇器的疊加，其權(quán)重都不會高于類選擇器。同理，復(fù)合選擇器的權(quán)重?zé)o論為多少個類選擇器和標(biāo)簽選擇器的疊加，其權(quán)重都不會高于i選擇器。
