首頁(yè)技術(shù)文章正文

CSS樣式優(yōu)先級(jí)怎樣劃分？【CSS優(yōu)先級(jí)規(guī)則】

更新時(shí)間:2022-12-09 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

定義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定義“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

<!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，效果如下所示。

1670579654196_復(fù)合選擇器.png

在上圖中，文本并沒有像預(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選擇器。


分享到：
在線咨詢 我要報(bào)名
和我們?cè)诰€交談！