重学前端 13 # 浏览器工作解析（三）

一、概括

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

二、CSS构建过程

构建 DOM 的过程是：从父到子，从先到后，一个一个节点构造，并且挂载到 DOM 树上的，那么这个过程中，依次拿到上一步构造好的元素，去检查它匹配到了哪些规则，再根据规则的优先级，做覆盖和调整。

2.1、选择器

• 空格: 后代，选中它的子节点和所有子节点的后代节点
• >: 子代，选中它的子节点
• +：直接后继选择器，选中它的下一个相邻节点
• ~：后继，选中它之后所有的相邻节点
• ||：列，选中表格中的一列

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

接下来看一下操作过程。

三、操作过程

首先，须把 CSS 规则进行处理。作为一门语言，CSS 需要先经过词法分析和语法分析，变成计算机能够理解的结构。将其抽象成一棵可用的抽象语法树。

一个 compound-selector 是检查一个元素的规则，而一个复合型选择器，则是由数个 compound-selector 通过前面讲的符号连接起来的。

3.1、后代选择器 “空格”

后代选择器的作用范围是父节点的所有子节点，因此规则是在匹配到本标签的结束标签时回退。

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

当匹配 a#b 的元素时，才会开始检查它所有的子代是否匹配 .cls。

后退的情况：

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

这段代码里有 cls 类的有有两个 span 标签，所以为了防止第三个 span 才不会被选中，当遇到 </a> 时，必须使得规则 a#b .cls 回退一步。

3.2、后继选择器“ ~ ”

.cls~* {
    border:solid 1px green;
}

<div>
<span>1<span>
<span class=cls>2<span>
<span>
    3
    <span>4</span>
<span>
<span>5</span>
</div>

上面代码可以看出 .cls 选中了span2，它的后继应该是 span3，span4是span3的子节点不应被选中， span5是后继应该被选中。

从上面我们可以得出一个结论：后继节点和当前节点父元素相同是充分必要条件。

3.3、子代选择器 “>”

div>.cls {
    border:solid 1px green;
}

<div>
<span>1<span>
<span class=cls>2<span>
<span>
    3
    <span>4</span>
<span>
<span>5</span>
</div>

当 DOM 树构造到 div 时，匹配了 CSS 规则的第一段，激活后面的 .cls 选择条件，并且指定父元素必须是当前 div。于是span2就会被选中。

3.4、直接后继选择器 “+”

直接后继选择器只对唯一一个元素生效，不需要像前面几种一样反复激活和关闭规则。

3.5、列选择器 “ || ”

列选择器比较特别，它是专门针对表格的选择器。

3.6、其他

3.6.1、逗号分隔

/* 这里用,隔开，可以当作两条规则处理 */
a#b, .cls {
}

a#b {
}
.cls {
}

3.6.2、选择器重合

可以使用树形结构来进行一些合并，来提高效率。

#a .cls {
}
#a span {
}
#a>span {
}

上面选择器可以构建成一棵树

• #a    

• < 空格 >.cls
• < 空格 >span
• >span