CSS選擇器優先順序與效率優化
阿新 • • 發佈:2018-12-25
各類選擇器的優先順序
- important宣告 1,0,0,0
- ID選擇器 0,1,0,0
- 類選擇器 0,0,1,0
- 偽類選擇器 0,0,1,0
- 屬性選擇器 0,0,1,0
- 標籤選擇器 0,0,0,1
- 偽元素選擇器 0,0,0,1
- 萬用字元選擇器 0,0,0,0
在上面的選擇器中,此外,經測試
屬性選擇器 = 偽類選擇器(應用最後一個)
:last-child{color:red;}
[desc]{color:green;}
偽類選擇器 > 相鄰選擇器
:last-child{color:green;}
p ~ p{color:blue;}
相鄰選擇器 = 子選擇器 = 後代選擇器(應用最後一個)
p~p{color:red;}
body p {color:blue;}
body > p{color:green;}
後代選擇器 > 標籤選擇器
p ~ p{color:blue;}
p{color:green;}
樣式位置的影響
-
<style></style>
同<link />
同級,應用取決於<style>
標籤和<link />
標籤的先後順序 -
元素
style=""
屬性的優先順序高於以上兩種樣式 -
!important
優先順序高於以上兩種樣式
備註
!important
在IE6中的BUG:在同一組CSS屬性中, !important
不起作用。如:
#selector{color:blue !important;color:green;}
選擇器效率
讀取選擇器的原則是從右到左。因此,我們書寫的右邊的最後一個選擇器,被稱作關鍵選擇器,對於效率有決定性影響。
- ID選擇器
- 類選擇器
- 標籤選擇器
- 相鄰選擇器
- 子選擇器
- 後代選擇器
- 萬用字元選擇器
- 屬性選擇器
- 偽類選擇器
優先順序高的不一定效率高
舉個例子:#id .class
與 div#id
p.class
前者效率高於後者,而後者優先順序高於前者。我們需要在效率與優先順序之間平衡取捨。
優化建議
以下網址提供了諸多建議:
扼要摘其精要總結如下:
-
避免使用萬用字元
-
不使用標籤名或類名修飾ID規則:如果規則使用ID選擇器作為關鍵選擇器,不要給規則新增標籤名。因為ID本身就是唯一的,新增標籤名會不必要地降低匹配效率。
-
不使用標籤名修飾類:相較於標籤,類更具獨特性。
-
儘量選擇最具體的方式:造成低效的最簡單粗暴的原因就是在標籤上使用太多規則。給元素新增類可以更快細分到類方式,可以減少規則去匹配標籤的時間。
-
關於後代選擇器和子選擇器:避免使用後代選擇器,非要用的話建議用子選擇器代替,但子選擇器也要慎用,標籤規則永遠不要包含子選擇器。
-
利用可繼承性:沒必要在一般內容上宣告樣式。