编写高效的CSS选择符（节选）

最右边优先

css选择符是从右向左进行匹配的。

样式系统从最右边的选择符开始向左匹配规则。只要当前的选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和匹配的元素，或者因为不匹配而退出。

编写高效选择符指南

避免使用通配规则
除了传统意义上的通配选择符之外，相邻兄弟选择符、子选择符、后代选择符和属性选择符都可以归纳为“通配规则”。推荐仅用ID、类和标签选择符。

不要限定ID选择符
在页面中一个指定的ID只能对应一个选择符，所以没有必要添加额外的限定符。

不要限定类选择符
不要用具体的标签限定类选择符，而是根据实际情况对类名进行扩展。

让规则越具体越好
不要试图编写常选择器（ol li a）,最好是创建一个像.list-anchor一样的类，并把它添加到适当的元素上。

避免使用后代选择符
通常处理后代选择符的开销是最高的，而使用子选字符也可以得到想要的结果时，并且更高效。

避免使用标签——子选择符
如果有像#toc > li > a这样的基于标签的子选择符，那么应该使用一个类来关联每个标签元素，如.toc-anchor。

质疑子选择符的所有用途
再次提醒大家检查所有使用子选择符的地方，然后尽可能用具体的类取代它们。
依靠继承
了解哪些属性可以通过继承而来，然后避免对这些属性重复指定规则。

应用JS修改样式

应用JS修改样式很容易触发回流。回流需要重新应用CSS规则，这样意味着浏览器必须再次匹配所有的CSS选择符。如果CSS选择符是低效的，那么回流可能消耗的时间就会多到引起用户注意。

总结

杜绝低效CSS选择符的影响，不仅要考虑页面加载时间，也要考虑用户交互时如何使用样式进行表现。如果JS对样式属性有操作，且页面开始变慢，那么低效的CSS选择符就很可能是罪魁祸首。

关键字: 关键选择符、回流时间