CSS 選擇器優先順序規則

admin發表於2018-11-16
CSS

CSS是一個有秩序或者說有等級的"社會"，誰優先順序高，誰制定的規則就會生效。

選擇器優先順序由高到低順序如下：

（1）.內聯樣式。

（2）.id選擇器。

（3）.偽類選擇器、屬性選擇器與類選擇器。

（4）.元素選擇器。

（5）.* 萬用字元選擇器。

（6）.從父輩元素繼承而來的樣式。

但是在專案開發中，CSS選擇器通常會組合巢狀應用。

所以很多時候並不是單個選擇器之間優先順序的比較，而是多對多的"群毆"。

下面逐步介紹一下CSS選擇器優先順序規則，首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#middle span{
  color:red;
} 
#box span{
  color:blue;
}   
</style>  
</head>
<body>
<div id="box">
  <div id="middle">
    <span>螞蟻部落</span>
  </div>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/16/154531b3rohpoz3301n0fb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

CSS將span字型顏色設定為藍色。

相信很多朋友預期顏色是紅色，因為middle元素距離span元素更近，所以選擇器有限級更高。

然而CSS優先順序規則並不是這樣，分析如下：

（1）.選擇器優先順序僅由選擇器決定，與元素距離目標元素距離無關。

（2）.如果選擇器的優先順序相同，CSS程式碼中，靠後的CSS規則優先順序高於前面的規則。

一.優先順序計算規則：

下面給出選擇器優先順序計算規則：根據選擇器優先順序的高低，大致可以分為四個等級：

用0,0,0,0表示，等級從左到右降序排列：

（1）.id選擇器權重等級：0,1,0,0。

（2）.類、屬性或偽類選擇器權重等級：0,0,1,0。

（3）.元素和偽元素選擇器權重等級：0,0,0,1。

（4）.*萬用字元選擇器權重等級：0,0,0,0。

首先比較最高等級，如果打個平手，那麼再比較次一等級，以此類推。

如果選擇器等級權重相同，那麼後來者居上，也就是後面宣告的屬性會覆蓋前面的。

特別說明：

（1）.同級選擇器之間比較的是數量，不同級之間與數量無關，十個師長也頂不上一個軍長權力大。

（2）.!important與內聯CSS權重最高不受上述規則的限制。

（3）.選擇器優先順序僅由選擇器決定，與元素距離目標元素距離無關。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
a{color: yellow;} /*權重值：0,0,0,1*/
div a{color: green;} /*權重值：0,0,0,2*/
.demo a{color: black;} /*權重值：0,0,1,1*/
.demo input[type="text"]{color: blue;} /*權重值：0,0,2,1*/
.demo *[type="text"]{color: grey;} /*權重值：0,0,2,0*/
#demo a{color: orange;} /*權重值：0,1,0,1*/
div#demo a{color: red;} /*權重值：0,1,0,2*/  
</style>  
</head>
<body>
  <a href="#">黃色</a>
  <div class="demo">
    <input type="text" value="藍色" />
    <a href="">黑色</a>
  </div>
  <div id="demo">
    <a href="">紅色</a>
  </div>
</body>
</html>

CSS的權重在程式碼部分已經詳細註釋，不再進一步說明。

二.not偽類不參與權重計算：

關於此選擇器的基本用法可以參閱CSS E:not()一章節。

不會計算:not()選擇器的權重，但是會計算它小括號中選擇器的權重。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div.box p {
  color:red;
}
div:not(.box) p {
  color: blue;
}
</style>
</head>
<body>
<div class="box">
  <p>螞蟻部落一</p>
  <div class="inner">
    <p>螞蟻部落二</p>
  </div>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/16/154636wwgaln2nrdi2r21k.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

由於:not()中的選擇器計算權重，所以它的字型顏色會被設定為藍色。

最後再強調一點，優先順序是基於選擇器型別，看如下程式碼：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div#ant {
  color: green;
}
div[id="ant"] {
  color: blue;
}
</style>
</head>
<body>
  <div id="ant">螞蟻部落</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/16/154658sbo09nnnnc90u63c.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

雖然選擇器都是利用id屬性值，但是一個是id選擇器一個是屬性選擇器。

相關文章