一、概括
本文主要聊聊浏览器是如何把
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
