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

Date: 7th of Aug, 2015

Author: HaoyCn

本文收集網上各處關于CSS選擇器的文章總結，并自己歸納一篇。

各類選擇器的優先級

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;}

選擇器效率

讀取選擇器的原則是從右到左。因此，我們書寫的右邊的最后一個選擇器，被稱作關鍵選擇器，對于效率有決定性影響。

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

ID選擇器

類選擇器

標簽選擇器

相鄰選擇器

子選擇器

后代選擇器

通配符選擇器

屬性選擇器

偽類選擇器

優先級高的不一定效率高

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

前者效率高于后者，而后者優先級高于前者。我們需要在效率與優先級之間平衡取舍。

優化建議

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

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

扼要摘其精要總結如下：

避免使用通配符

不使用標簽名或類名修飾ID規則：如果規則使用ID選擇器作為關鍵選擇器，不要給規則添加標簽名。因為ID本身就是唯一的，添加標簽名會不必要地降低匹配效率。

不使用標簽名修飾類：相較于標簽，類更具獨特性。

盡量選擇最具體的方式：造成低效的最簡單粗暴的原因就是在標簽上使用太多規則。給元素添加類可以更快細分到類方式，可以減少規則去匹配標簽的時間。

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

利用可繼承性：沒必要在一般內容上聲明樣式。

總結

以上是生活随笔為你收集整理的CSS 选择器优先级与效率优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。