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. 利用可继承性：没必要在一般内容上声明样式。