css选择器解析规则

转载链接：https://blog.csdn.net/csu_passer/article/details/101460974

在平时的开发过程中，我知道CSS选择器是从右往左匹配的，但是不知道为什么是从右往左而不是从左往右。这里记录一下分析心得。

我们知道dom树和css会合成为render树，这个操作实际上就是是需要将css附着到dom树上，因此需要根据选择器提供的信息对dom树进行遍历，才能将样式成功附着到对应的dom元素上。

假如我们有这样一颗dom树：

 

 我们定义这样一段 css

 

 

如果浏览器是从左到右解析:

遍历dom树
.main -> section -> h1 发现没有.desc 回溯
.main -> section -> .content -> p 发现没有.desc 回溯
.main -> aside -> .desc -> p 成功找到
如果从右到左解析：

先找出p的所有节点
向上遍历 p -> .content -> section ->.main发现没有.desc 换一个p
p->.desc -> aside -> .main
当dom树比较复杂的时候，可以发现从右到左解析能够有效减少回溯次数提升性能。

不过当从右往左解析时需要增加的性能消耗是如何在一棵树中找出所有的’p’节点，不过这一步增加的性能远小于回溯带来的性能损耗。