一个浏览器是如何工作的（3）

主题：浏览器是如何把 CSS 规则应用到节点上，并给这棵朴素的 DOM 树添加上 CSS 属性的

因为DOM是流式：从父到子，从先到后，一个一个节点构造，并且挂载到 DOM 树上的，那么这个过程中，此时能同步把 CSS 属性计算出来，所以这里就用到了css语法部分的规则。我们跟随规则去看我们这节的主题

回顾一下CSS语法：

空格: 后代，选中它的子节点和所有子节点的后代节点。

>: 子代，选中它的子节点。

+：直接后继选择器，选中它的下一个相邻节点。

~：后继，选中它之后所有的相邻节点。

||：列，选中表格中的一列。

选择器的出现顺序，必定跟构建 DOM 树的顺序一致。这是一个 CSS 设计的原则，即保证选择器在 DOM 树构建到当前节点时，已经可以准确判断是否匹配，不需要后续节点信息。

在这里假设 CSS 已经被解析成了一棵可用的抽象语法树

这里我们用到在CSS中的compound-selector，它 是检查一个元素的规则，而一个复合型选择器，则是由数个 compound-selector 通过前面讲的符号连接起来的。

简单的解释一下第一个：后代选择器 “空格”

a#b .cls {width: 100px;
}

可以把一个 CSS 选择器按照 compound-selector 来拆成数段，每当满足一段条件的时候，就前进一段。比如，在上面的例子中，当我们找到了匹配 a#b 的元素时，我们才会开始检查它所有的子代是否匹配 .cls。

除了前进一段的情况，我们还需要处理后退的情况，比如，我们这样一段代码：

<a id=b><span>1<span><span class=cls>2<span>
</a>
<span class=cls>3<span>

当遇到 时，必须使得规则 a#b .cls 回退一步，这样第三个 span 才不会被选中。后代选择器的作用范围是父节点的所有子节点，因此规则是在匹配到本标签的结束标签时回退。

以下几个选择器可以依次类推，我们可以大概了解浏览器是如何把 CSS 规则应用到节点上，并给这棵朴素的 DOM 树添加上 CSS 属性的

后继选择器“ ~ ”

子代选择器“ >”

直接后继选择器“ +”

列选择器“ || ”

此文章为4月Day8学习笔记，内容来源于极客时间《重学前端》，推荐该课程。