编写高效的 CSS 选择器

1. css选择器

CSS选择器具有高效的继承性，引用Steve Souders的话， CSS选择器效率从高到低的排序如下：

1. ID选择器 比如#header
2. 类选择器 比如.promo
3. 元素选择器 比如 div
4. 兄弟选择器 比如 h2 + p
5. 子选择器 比如 li > ul
6. 后代选择器 比如 ul a 7. 通用选择器 比如 *
7. 属性选择器 比如 type = “text”
8. 伪类/伪元素选择器 比如 a:hover
9. 甚至有时候id并不比class快很多,差不多的.

2. 组合选择器

从右开始,以它的方式回溯dom树,这其实比从顶部开始查找要高效很多

3. 关键选择器

最右侧的选择器为关键选择器

这就是为什么我对选择器的性能如此感兴趣的原因了：必须在web 标准最佳实践和速度之间的保持平衡。

4. 过度限制选择器

拥有明确选择器的好处就是可以避免过度限制选择器,如下是一个过度限制的实例

html body .wrapper #content a {}