各類選擇器的優先順序

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. 利用可繼承性：沒必要在一般內容上宣告樣式。