重学前端学习笔记（十三）--浏览器工作解析（三）-白红宇

笔记说明

重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：kaimo313@foxmail.com。

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

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

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

接下来看一下操作过程。

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

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

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

a#b .cls {    width: 100px;}复制代码

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

后退的情况：

    1    23复制代码

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

.cls~* {    border:solid 1px green;}复制代码

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

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

div>.cls {    border:solid 1px green;}复制代码

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

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

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

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

a#b {}.cls {}复制代码

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

#a .cls {}#a span {}#a>span {}复制代码

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

之前学习css的时候没有想过是什么实现的，只知道怎么用，这样写能实现效果就行了，学习winter专栏之后，认识更深了，有些问题直接本质可能对你会影响更大。