css选择器解析：从右向左

css权重优先级

关于css权重优先级

!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符

浏览器渲染过程

在说到css解析器之前，我们需要先熟悉下浏览器的渲染过程

1.html通过HTML Parser转化成DOM Tree
2.css通过CSS Parser转化成CSSOM Tree
3.整合css和html两个tree为render Tree
4.根据Layout(重排)计算出DOM节点在网页中的位置和宽高排布
5.浏览器根据render Tree和Layout利用GUI线程进行渲染展示（重绘）

与css解析器相关，我们先重点看第3步：整合css和html两个tree为render Tree。这个整合过程，实际上是在每个DOM节点上遍历CSS样式，最终生成每个节点的样式规则。

css解析选择器的方向：从右到左

为什么要从右到左 ?

为了解释这个问题，我们先来看一段代码和对应的css选择器

<div class="col"><div class="a"><div class="b"><div class="c"></div></div><div class="b"><ul class="d"><li>1</li><li class="c">2</li><li>3</li><li>4</li></ul></div>
</div> 

.col .a .b { color: #f00; }
.col .b .c { color: #0f0; }
.b .c { color: #00f; } 

如果从左到右，遍历方式如下：

某个DOM节点的选择器以.col .a .b为例，

• 先遍历所有CSSOM节点，找到所有col
• 再遍历col所有后代节点，找到所有的a
• 再遍历所有a的后代节点，找到所有的b

如果从右到左，遍历方式如下：

节点对比从左到右减少了，是因为有公共节点，从右到左，只要有公共，就能共用，这样公共样式就很容易集合到同一分支上

某个DOM节点的选择器以.col .a .b为例，

• 先遍历所有CSSOM节点，找到所有的b
• 以b为基准，找上层的a
• 以a为基准，找上层的col

这种遍历方式，只用遍历一次，然后判断上层节点是否匹配即可。

从右往左进行解析还有一个好处那就是从右往左进行匹配的时候，匹配的全部是DOM元素的父节点，而从左往右进行匹配的时候时候，匹配的全部是DOM元素的子节点，这样就避免了HTML与CSS没有下载完需要进行等待的情形。

由此也可以等到一个优化重绘的结论：避免不必要的复杂的 CSS 选择器，尤其是后代选择器，因为为了匹配选择器将耗费更多的 CPU。

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享