CSS规则节点应用
一、整体过程
构建 DOM 的过程中，会依次拿到上一步构造好的元素，去检查它匹配到了哪些规则，再根据规则的优先级，做覆盖和调整。所以，从这个角度看，所谓的选择器，应该被理解成“匹配器”才更合适。
选择器:
- 空格: 后代，选中它的子节点和所有子节点的后代节点。
-
: 子代，选中它的子节点。
- +：直接后继选择器，选中它的下一个相邻节点。
- ~：后继，选中它之后所有的相邻节点。
- ||：列，选中表格中的一列。（css双管道）
选择器的出现顺序，必定跟构建 DOM 树的顺序一致。这是一个 CSS 设计的原则，即保证选择器在 DOM 树构建到当前节点时，已经可以准确判断是否匹配，不需要后续节点信息。
未来也不可能会出现“父元素选择器”这种东西，因为父元素选择器要求根据当前节点的子节点，来判断当前节点是否被选中，而父节点会先于子节点构建。
二、后代选择器 “空格”
a#b .cls {
width: 100px;
}
把一个 CSS 选择器按照 compound-selector 来拆成数段，每当满足一段条件的时候，就前进一段。
比如，在上面的例子中，当找到了匹配 a#b 的元素时，我们才会开始检查它所有的子代是否匹配 .cls。
三、后继选择器“ ~ ”
.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 选中了 span 2 然后 span 3 是它的后继，但是 span 3 的子节点 span 4 并不应该被选中，而 span 5 也是它的后继，因此应该被选中。
按照 DOM 树的构造顺序，4 在 3 和 5 中间，我们就没有办法像前面的后代选择器一样通过激活或者关闭规则来实现匹配。
四、子代选择器“ >”
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。于是后续的构建 DOM 树构建过程中，span 2 就被选中了。
五、直接后继选择器“ +”
只对唯一一个元素生效
六、列选择器“ || ”
专门针对表格的选择器，跟表格的模型建立相关
七，其他
a#b, .cls {}
//当作两条规则来处理：
a#b {}
.cls {}
