前端性能优化：CSS 选择器性能

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

组合选择器

你可以有一个标准的选择器比如 #nav，来选择任何带有ID为”nav”的元素，或在你可以有一个组合选择器比如#nav a,来选择任何在ID为’nav’的元素里面的链接元素此刻，我们读这些是从左到右的方式。我们是先找到#nav，然后从它的里面找其他元素。但是浏览器解析这些不是这样的：浏览器解析选择器是从右到左的方式。

因此建议使用ID，类选择器，避免属性，后代选择器，通用选择器。组合选择器，优化最右边的关键选择器。

编写高效的 CSS 选择器