更新時(shí)間:2022年12月09日18時(shí)00分 來源:傳智教育 瀏覽次數(shù):
定義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)頁(yè)制作中,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)為:
<p class="blue" id="header"> 幫幫我,我到底顯示什么顏色? </p>
在上面的示例代碼中,使用不同的選擇器對(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)為:
<p class="father" id="header"> <strong class="blue">文本的顏色</strong> </p>
這時(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)如下:
<p id="header" class="blue"> <strong>繼承樣式不如自己定義的權(quán)重大</strong> </p>
在上面的代碼中,雖然“#header”具有權(quán)重100,但被標(biāo)簽繼承時(shí)權(quán)重為0。而“strong”選擇器的權(quán)重雖然僅為1,但它大于繼承樣式的權(quán)重,所以頁(yè)面中的文本顯示為紅色。
(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)代碼如下:
<title>CSS優(yōu)先級(jí)</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)重相同時(shí),就近優(yōu)先</p> </body>
在上面的示例代碼中,第2行代碼通過外鏈?zhǔn)揭隒SS樣式,該樣式設(shè)置文本樣式顯示為紅色。第3~5行代碼通過內(nèi)嵌式引入CSS樣式,該樣式設(shè)置文本樣式顯示為灰色。
上面的頁(yè)面被解析后,段落文本將顯示為灰色,即內(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定義“limportant”命令,會(huì)被賦予最大的優(yōu)先級(jí)
當(dāng)CSS定義了“limportant”命令后,將不再考慮權(quán)重和位置關(guān)系,使用“limportant”的標(biāo)簽都具有最大優(yōu)先級(jí)。例如,下面的示例代碼。
#header{color:red!important;}
應(yīng)用此樣式的段落文本顯示為紅色,因?yàn)?ldquo;limportant”命令的樣式擁有最大的優(yōu)先級(jí)。需要注意的是,“limportant”命令必須位于屬性值和分號(hào)之間,否則無效。
復(fù)合選擇器的權(quán)重為組成它的基礎(chǔ)選擇器權(quán)重的疊加,但是這種疊加并不是簡(jiǎn)單的數(shù)字之和。下面通過一個(gè)案例來具體說明,如例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個(gè)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對(duì)<div>標(biāo)簽,它們層層嵌套。第15行代碼我們對(duì)最里層的<div>定義類名“inner”。第7、8行代碼,使用類選擇器和后代選擇器分別定義最里層div的樣式。此時(shí)瀏覽器中文本的樣式到底如何顯示呢?如果僅僅將基礎(chǔ)選擇器的權(quán)重相加,后代選擇器(包含11層div)的權(quán)重為11,大于類選擇器“.inner”的權(quán)重10,文本將添加下畫線。
運(yùn)行例1,效果如下所示。
在上圖中,文本并沒有像預(yù)期的那樣添加下畫線,而顯示了類選擇器“.inner”定義的刪除線??梢?,無論在外層添加多少個(gè)標(biāo)簽,復(fù)合選擇器的權(quán)重?zé)o論為多少個(gè)<div>標(biāo)簽選擇器的疊加,其權(quán)重都不會(huì)高于類選擇器。同理,復(fù)合選擇器的權(quán)重?zé)o論為多少個(gè)類選擇器和標(biāo)簽選擇器的疊加,其權(quán)重都不會(huì)高于i選擇器。
北京校區(qū)