1. 程式人生 > >CSS選擇器優先順序與效率優化

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

選擇器效率

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

  1. ID選擇器
  2. 類選擇器
  3. 標籤選擇器
  4. 相鄰選擇器
  5. 子選擇器
  6. 後代選擇器
  7. 萬用字元選擇器
  8. 屬性選擇器
  9. 偽類選擇器

優先順序高的不一定效率高

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

前者效率高於後者,而後者優先順序高於前者。我們需要在效率與優先順序之間平衡取捨。

優化建議

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

扼要摘其精要總結如下:

  1. 避免使用萬用字元

  2. 不使用標籤名或類名修飾ID規則:如果規則使用ID選擇器作為關鍵選擇器,不要給規則新增標籤名。因為ID本身就是唯一的,新增標籤名會不必要地降低匹配效率。

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

  4. 儘量選擇最具體的方式:造成低效的最簡單粗暴的原因就是在標籤上使用太多規則。給元素新增類可以更快細分到類方式,可以減少規則去匹配標籤的時間。

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

  6. 利用可繼承性:沒必要在一般內容上宣告樣式。