摘要：三操作过程首先，须把规则进行处理。后代选择器空格后代选择器的作用范围是父节点的所有子节点，因此规则是在匹配到本标签的结束标签时回退。
笔记说明
重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：kaimo313@foxmail.com。一、概括
本文主要聊聊浏览器是如何把 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。
后退的情况：
1 2 3
这段代码里有 cls 类的有有两个 span 标签，所以为了防止第三个 span 才不会被选中，当遇到 时，必须使得规则 a#b .cls 回退一步。
3.2、后继选择器“ ~ ”.cls~* {
border:solid 1px green;
}
1 2 3 4 5
上面代码可以看出 .cls 选中了span2，它的后继应该是 span3，span4是span3的子节点不应被选中， span5是后继应该被选中。
从上面我们可以得出一个结论：后继节点和当前节点父元素相同是充分必要条件。
3.3、子代选择器 “>”div>.cls {
border:solid 1px green;
}
1 2 3 4 5
当 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
个人总结之前学习css的时候没有想过是什么实现的，只知道怎么用，这样写能实现效果就行了，学习winter专栏之后，认识更深了，有些问题直接本质可能对你会影响更大。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/109446.html
摘要：三操作过程首先，须把规则进行处理。后代选择器空格后代选择器的作用范围是父节点的所有子节点，因此规则是在匹配到本标签的结束标签时回退。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，...
摘要：三操作过程首先，须把规则进行处理。后代选择器空格后代选择器的作用范围是父节点的所有子节点，因此规则是在匹配到本标签的结束标签时回退。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，...
摘要：事件触发和监听事件相关。文档是一个由标签嵌套而成的树形结构，因此，也是使用树形的对象模型来描述一个文档。节点的写法三是树继承关系的根节点。七表示一个上的范围，这个范围是以文字为最小单位的。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的...
摘要：事件触发和监听事件相关。文档是一个由标签嵌套而成的树形结构，因此，也是使用树形的对象模型来描述一个文档。节点的写法三是树继承关系的根节点。七表示一个上的范围，这个范围是以文字为最小单位的。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的...
阅读 1860·2023-04-26 01:56
阅读 3087·2021-11-18 10:02
阅读 3020·2021-09-09 11:35
阅读 1239·2021-09-03 10:28
阅读 3369·2019-08-29 18:36
阅读 2828·2019-08-29 17:14
阅读 811·2019-08-29 16:10
阅读 1593·2019-08-26 13:45
