CSS > 選擇器優先級與效率優化

CSS選擇器優先級與效率優化

Date: 7th of Aug, 2015

Author: HaoyCn

本文收集網上各處關於CSS選擇器的文章總結，並本身概括一篇。

各種選擇器的優先級

1. important聲明 1,0,0,0
2. ID選擇器 0,1,0,0
3. 類選擇器 0,0,1,0
4. 僞類選擇器 0,0,1,0
5. 屬性選擇器 0,0,1,0
6. 標籤選擇器 0,0,0,1
7. 僞元素選擇器 0,0,0,1
8. 通配符選擇器 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;}

樣式位置的影響

1. <style></style> 同 <link /> 同級，應用取決於<style>標籤和<link /> 標籤的前後順序

2. 元素style=""屬性的優先級高於以上兩種樣式

3. !important 優先級高於以上兩種樣式

備註

!important 在IE6中的BUG：在同一組CSS屬性中, !important不起做用。如：

#selector{color:blue !important;color:green;}

選擇器效率

讀取選擇器的原則是從右到左。所以，咱們書寫的右邊的最後一個選擇器，被稱做關鍵選擇器，對於效率有決定性影響。

如下效率排行由 @Steve Souders 提供。

1. ID選擇器
2. 類選擇器
3. 標籤選擇器
4. 相鄰選擇器
5. 子選擇器
6. 後代選擇器
7. 通配符選擇器
8. 屬性選擇器
9. 僞類選擇器

優先級高的不必定效率高

舉個例子：#id .class 與 div#id p.class

前者效率高於後者，然後者優先級高於前者。咱們須要在效率與優先級之間平衡取捨。

優化建議

如下網址提供了諸多建議：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficie...

扼要摘其精要總結以下：

1. 避免使用通配符

2. 不使用標籤名或類名修飾ID規則：若是規則使用ID選擇器做爲關鍵選擇器，不要給規則添加標籤名。由於ID自己就是惟一的，添加標籤名會沒必要要地下降匹配效率。

3. 不使用標籤名修飾類：相較於標籤，類更具獨特性。

4. 儘可能選擇最具體的方式：形成低效的最簡單粗暴的緣由就是在標籤上使用太多規則。給元素添加類能夠更快細分到類方式，能夠減小規則去匹配標籤的時間。

5. 關於後代選擇器和子選擇器：避免使用後代選擇器，非要用的話建議用子選擇器代替，但子選擇器也要慎用，標籤規則永遠不要包含子選擇器。

6. 利用可繼承性：不必在通常內容上聲明樣式。