定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多樣式規(guī)則應(yīng)用在同一元素上的情況。此時(shí)CSS就會(huì)根據(jù)樣式規(guī)則的權(quán)重，優(yōu)先顯示權(quán)重最高的樣式。CSS優(yōu)先級(jí)指的就是CSS樣式規(guī)則的權(quán)重。在網(wǎng)頁制作中，CSS為每個(gè)基礎(chǔ)選擇器都指定了不同的權(quán)重，方便我們添加樣式代碼。為了深入理解CSS優(yōu)先級(jí)，我們通過一段示例代碼進(jìn)行分析。CSS樣式代碼如下：

p{?color:red;}???????????/*標(biāo)簽樣式*/.blue{?color:green;}?????/*class樣式*/theader{?color:blue;}????/*id樣式*/

CSS樣式代碼對(duì)應(yīng)的HTML結(jié)構(gòu)為：

????幫幫我，我到底顯示什么顏色?

在上面的示例代碼中，使用不同的選擇器對(duì)同一個(gè)元素設(shè)置文本顏色，這時(shí)瀏覽器會(huì)根據(jù)CSS選擇器的優(yōu)先級(jí)規(guī)則解析CSS樣式。為了便于判斷元素的優(yōu)先級(jí)，CSS為每一種基礎(chǔ)選擇器都分配了一個(gè)權(quán)重，我們可以通過虛擬數(shù)值的方式為這些基礎(chǔ)選擇器匹配權(quán)重。假設(shè)標(biāo)簽選擇器具有權(quán)重為1.類選擇器具有權(quán)重則為10，id選擇器具有權(quán)重則為l00。這樣id選擇器“#header”就具有最大的優(yōu)先級(jí)，因此文本顯示為藍(lán)色。

對(duì)于由多個(gè)基礎(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*/

對(duì)應(yīng)的HTML結(jié)構(gòu)為：

????文本的顏色

這時(shí)，CsS代碼中的“#header strong.blue”選擇器的權(quán)重最高，文本顏色將顯示為紅色。此外，在考慮權(quán)重時(shí)，我們還需要注意一些特殊的情況。

(1)繼承樣式的權(quán)重為0

在嵌套結(jié)構(gòu)中、h不管父元素樣式的權(quán)重多大，被子元素繼承時(shí)，它的權(quán)重都為0，也就是說子元素定義的樣式會(huì)覆蓋繼承來的樣式。例如，下面的CSS樣式代碼。

strong{color:red;}#header{color:green;}

CSS樣式代碼對(duì)應(yīng)的HTML結(jié)構(gòu)如下：

??繼承樣式不如自己定義的權(quán)重大

在上面的代碼中，雖然“#header”具有權(quán)重100，但被標(biāo)簽繼承時(shí)權(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)先級(jí)。

(3)權(quán)重相同時(shí)，CSS的優(yōu)先級(jí)遵循就近原則

也就是說，靠近元素的樣式具有最大的優(yōu)先級(jí)，或者說按照代碼排列上下順序，排在最下邊的樣式優(yōu)先級(jí)最大。例如，下面為外部定義的CSS示例代碼。

/*CSS文檔,文件名為style_red.css*/#header{color:red;}?????????????????????/*外部樣式*/

對(duì)應(yīng)的HTML結(jié)構(gòu)代碼如下：

?/*引入外部定義的CSS代碼*/#header{color:gray;}/*內(nèi)嵌式樣式*/權(quán)重相同時(shí)，就近優(yōu)先

在上面的示例代碼中，第2行代碼通過外鏈?zhǔn)揭隒SS樣式，該樣式設(shè)置文本樣式顯示為紅色。第3~5行代碼通過內(nèi)嵌式引入CSS樣式，該樣式設(shè)置文本樣式顯示為灰色。

上面的頁面被解析后，段落文本將顯示為灰色，即內(nèi)嵌式樣式優(yōu)先。這是因?yàn)閮?nèi)嵌樣式比外鏈?zhǔn)綐邮礁拷麳TML.元素。同樣的道理，如果同時(shí)引用兩個(gè)外部樣式表，則排在下面的樣式表具有較大的優(yōu)先級(jí)。如果此時(shí)將內(nèi)嵌樣式更改為：

p{color:gray;}???????????????????/*內(nèi)嵌式樣式*/

此時(shí)外鏈?zhǔn)降膇d選擇器和嵌入式的標(biāo)簽選擇器權(quán)重不同，“#header”的權(quán)重更高，文字將顯示為外部樣式定義的紅色。

(4)CSS定義“l(fā)important”命令，會(huì)被賦予最大的優(yōu)先級(jí)

當(dāng)CSS定義了“l(fā)important”命令后，將不再考慮權(quán)重和位置關(guān)系，使用“l(fā)important”的標(biāo)簽都具有最大優(yōu)先級(jí)。例如，下面的示例代碼。

#header{color:red!important;}

應(yīng)用此樣式的段落文本顯示為紅色，因?yàn)椤發(fā)important”命令的樣式擁有最大的優(yōu)先級(jí)。需要注意的是，“l(fā)important”命令必須位于屬性值和分號(hào)之間，否則無效。

復(fù)合選擇器的權(quán)重為組成它的基礎(chǔ)選擇器權(quán)重的疊加，但是這種疊加并不是簡(jiǎn)單的數(shù)字之和。下面通過一個(gè)案例來具體說明，如例1所示。

例1 examplel1.html

.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個(gè)1的疊加*/?
??
?????文本的樣式
??