CSS 选择符是从右到左进行匹配的，当使用后代选择器的时候，浏览器会遍历所有子元素来确定 是否是指定的元素。

在合并 DOM 和 CSSDOM 时，会在 CSSDOM 中根据我们写的样式表选择器进行查询，然后把对应的样式应用到 DOM，此时就有一些 CSS 的优化点，如果编写 样式表 能够让浏览器查询的更快？

1. 避免使用通配符，只对需要用到的元素进行选择。

// ❌
// 会产生大量的计算
* {}

2. 关注可以通过继承实现的属性，避免重复匹配重复定义。

3. 少用标签选择器。如用类选择器替代。

// ❌
#box span{}

// ✅
.box-spanclass {}

4. id 和 class 选择器不要写多余的标签选择器。

// ❌
div#box{}
div.test{}

// ✅
#box {}
.test {}

5. 减少选择器的嵌套层级。后代选择器的开销是最高的，因此我们应该尽量将选择器的深度降到最低（最高不要超过三层），尽可能使用类来关联每一个标签元素。

6. 减少或避免使用@import，使用link。因为@import是在页面加载完成之后才去加载，而link是在页面加载时一起加载。

7. 属性值为0, 不要加单位。

8. 不要留着 {} 空规则 不删。

9. 属性值为0.xxx, 可以不写0，直接.xxx。

10. 内容与样式分离。

11. 不滥用web字体。

12. 慎用 float、position。