CSS 選擇器優先順序規則
CSS是一個有秩序或者說有等級的"社會"。
誰的優先順序高,誰制定的規則就會生效。
選擇器優先順序由高到低順序如下:
(1).內聯樣式。
(2).id選擇器。
(3).偽類選擇器、屬性選擇器與類選擇器。
(4).*萬用字元選擇器。
(5).從父輩元素繼承而來的樣式。
但是在專案開發中,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>
程式碼執行效果截圖如下:
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>
程式碼執行效果截圖如下:
由於: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>
程式碼執行效果截圖如下:
雖然選擇器都是利用id屬性值,但是一個是id選擇器一個是屬性選擇器。
相關文章
- css 選擇器優先順序CSS
- CSS 選擇器的優先順序CSS
- CSS之選擇器及其優先順序CSS
- 深入理解CSS選擇器優先順序CSS
- CSS3選擇器及優先順序CSSS3
- 真正理解"CSS選擇器的優先順序"CSS
- CSS入門十二:選擇器的優先順序CSS
- CSS 基礎(盒模型、選擇器、權重、優先順序)CSS模型
- CSS基礎知識-選擇器的種類及優先順序CSS
- CSS優先順序CSS
- 深入理解 CSS:基礎概念、註釋、選擇器及優先順序CSS
- 理解C語言宣告的優先順序規則C語言
- CSS 連結偽類選擇器順序原理CSS
- Nginx的location規則:優先順序和路徑替換Nginx
- 何為CSS 樣式優先順序CSS
- CSS之CSS和html整合方式及優先順序CSSHTML
- Linux排程器:程序優先順序Linux
- python運算子及優先順序順序Python
- Android程式優先順序Android
- 中斷優先順序
- Yacc使用優先順序
- PMO兩大要務:專案選擇與優先順序排序,助力專案成功排序
- SpringBoot配置檔案優先順序載入順序Spring Boot
- 運算子的優先順序
- SQL 優先順序join>whereSQL
- java運算子優先順序Java
- NTP時間伺服器優先順序配置伺服器
- CSS 選擇器命名規範CSS
- CSS 選擇器效能優化CSS優化
- CSS的三大特性(繼承、層疊和優先順序)CSS繼承
- CSS三個特性:層疊性、繼承性、優先順序CSS繼承
- [譯]HTTP/2的優先順序HTTP
- Yarn任務優先順序配置Yarn
- ansible 變數優先順序示例變數
- C++運算子優先順序C++
- java setPriority()設定優先順序Java
- 封裝優先順序佇列封裝佇列
- 程式流程 (順序,選擇,迴圈)