首頁技術文章正文

CSS樣式優(yōu)先級是怎樣劃分的？

更新時間:2022年12月09日18時00分來源:傳智教育瀏覽次數:

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

p{ color:red;}           /*標簽樣式*/
.blue{ color:green;}     /*class樣式*/
theader{ color:blue;}    /*id樣式*/

CSS樣式代碼對應的HTML結構為：

<p class="blue" id="header">
    幫幫我，我到底顯示什么顏色?
</p>

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

對于由多個基礎選擇器構成的復合選擇器(并集選擇器除外)，其權重可以理解為這些基礎選擇器權重的疊加。例如，下面的CSS代碼。

p strong{color:black}            /*權重為：1+1*/
strong.blue{color:green;}        /*權重為：1+10*/
.father strong{color:yellow}     /*權重為：10+1*/
p.father strong{color:orange;}   /*權重為：1+10+1*/
p.father .blue{color:gold;}      /*權重為：1+10+10*/
theader strong{color:pink;}      /*權重為：100+1*/
#header strong.blue{color:red;}  /*權重為：100+1+10*/

對應的HTML結構為：

<p class="father" id="header">
    <strong class="blue">文本的顏色</strong>
</p>

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

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

在嵌套結構中、h不管父元素樣式的權重多大，被子元素繼承時，它的權重都為0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。例如，下面的CSS樣式代碼。

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

CSS樣式代碼對應的HTML結構如下：

<p id="header" class="blue">
  <strong>繼承樣式不如自己定義的權重大</strong>
</p>

在上面的代碼中，雖然“#header”具有權重100，但被標簽繼承時權重為0。而“strong”選擇器的權重雖然僅為1，但它大于繼承樣式的權重，所以頁面中的文本顯示為紅色。

(2)行內樣式優(yōu)先

應用style屬性的元素，其行內樣式的權重非常高。換算為數值，我們可以理解為遠大于100。因此行內樣式擁有比上面提到的選擇器都高的優(yōu)先級。

(3)權重相同時，CSS的優(yōu)先級遵循就近原則

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

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

對應的HTML結構代碼如下：

<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>
/*內嵌式樣式*/
<p id="header">權重相同時，就近優(yōu)先</p>
</body>

在上面的示例代碼中，第2行代碼通過外鏈式引入CSS樣式，該樣式設置文本樣式顯示為紅色。第3~5行代碼通過內嵌式引入CSS樣式，該樣式設置文本樣式顯示為灰色。

上面的頁面被解析后，段落文本將顯示為灰色，即內嵌式樣式優(yōu)先。這是因為內嵌樣式比外鏈式樣式更靠近HTML.元素。同樣的道理，如果同時引用兩個外部樣式表，則排在下面的樣式表具有較大的優(yōu)先級。如果此時將內嵌樣式更改為：

p{color:gray;}                   /*內嵌式樣式*/

此時外鏈式的id選擇器和嵌入式的標簽選擇器權重不同，“#header”的權重更高，文字將顯示為外部樣式定義的紅色。

(4)CSS定義“limportant”命令，會被賦予最大的優(yōu)先級

當CSS定義了“limportant”命令后，將不再考慮權重和位置關系，使用“limportant”的標簽都具有最大優(yōu)先級。例如，下面的示例代碼。

#header{color:red!important;}

應用此樣式的段落文本顯示為紅色，因為“limportant”命令的樣式擁有最大的優(yōu)先級。需要注意的是，“limportant”命令必須位于屬性值和分號之間，否則無效。

復合選擇器的權重為組成它的基礎選擇器權重的疊加，但是這種疊加并不是簡單的數字之和。下面通過一個案例來具體說明，如例1所示。

例1 examplel1.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>復合選擇器權重的疊加</title>
<style type="text/css">
.inner{text-decoration:line-through;}/*類選擇器定義刪除線，權重為10*/
div div div div div div div div div div div{text-decoration:underline;}
/*后代選擇器定義下畫線，權重為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>標簽，它們層層嵌套。第15行代碼我們對最里層的<div>定義類名“inner”。第7、8行代碼，使用類選擇器和后代選擇器分別定義最里層div的樣式。此時瀏覽器中文本的樣式到底如何顯示呢?如果僅僅將基礎選擇器的權重相加，后代選擇器(包含11層div)的權重為11，大于類選擇器“.inner”的權重10，文本將添加下畫線。

運行例1，效果如下所示。

1670579654196_復合選擇器.png