为什么解析 CSS 选择器时一定要从右往左解析?
今天逛论坛时无意中看到这个熟悉的命题。勾起了一段心酸的往事,记得刚毕业面试时被这个问题ko过。今天总结一下算是祭奠下当年那个菜鸟的我。
首先来了解下页面是如何渲染的:首先浏览器会把HTML文档解析为DOM tree,然后解析CSS为CSS tree,接着把DOM tree和CSS tree组合构建成为一棵可以渲染的render tree,最终用来绘图,也就是最终呈现在我们面前的页面。
因为DOM可能是很复杂的结构,因此一种高效的能把DOM tree和CSS tree组合构建的方法就显得尤为必要。
把DOM tree和CSS tree组合构建的过程就是解析CSS选择器和DOM元素一一对应的过程。
至此我们大概了解了页面的渲染过程。
先来看从左往右解析CSS选择器的工作方式:
假设DOM结构和CSS如下:
```
// html
<body>
<div class="box">
<p>
<span class="red">hello</span>
</p>
</div>
<div class="box">
<div>
<span class="red">hello</span>
</div>
</div>
<div class="box">
<p>
<sp