浏览器：一个浏览器是如何工作的（阶段三）
该思维导图由 AI 生成，仅供参考
整体过程
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
本文介绍了浏览器如何将CSS规则应用到DOM树上，为DOM结构添加显示相关属性的过程。首先介绍了CSS选择器的各种符号，如空格、>、+、~、||等，以及其在DOM树构建过程中的应用。然后详细讲解了后代选择器、后继选择器、子代选择器、直接后继选择器和列选择器的实现原理。文章还提到了CSS选择器的逗号分隔和选择器重合的处理方式。最后，留下了一个问题，探讨了CSS语法解析成何种结构最适合进行CSS计算。整体来说，本文通过深入浅出的方式，帮助读者了解了浏览器中CSS计算的过程，为读者打下了基础。
《重学前端》，新⼈⾸单¥59
全部留言(36)
- 最新
- 精选
奕老师，对于这个问题，我也有疑问： dom树构建与cssom构建有先后关系吗？css计算与dom树流式构建同步进行是不是意味着dom树流式构建之前cssom已经构建完成呢？作者回复: 我这里说的确实有点歧义，cssom是有rule部分和view部分的，rule部分是在dom开始之前就构件完成的，而view部分是跟着dom同步构建的。
2019-03-0117- 啊柴老师好，文中后代选择器是说先检查父级，匹配后再检查子级，以前学习看到比较多的一种说法是从关键选择器开始匹配，然后左移查找选择器的祖先元素，实践中也一直把最后一个选择器权重加高。请问这是从开始就学错了，还是我对两种说法理解有偏差呢？
作者回复: 浏览器编写本身有不同的思路，但是按关键选择器这个思路，据我所知还没有实现。
2019-02-1417 
flow请问DOM去匹配css rule的时候是不是必须先等页面的css都下载完成后才会去匹配的？否则如果DOM匹配的时候对应的css还没下载完，后面怎么得到正确的css？作者回复: head中的css是要下载完的，body中放CSS的话，会重新计算。
2019-02-16314
嗯喊我杰哥<也就是说，未来也不可能会出现“父元素选择器”这种东西， 因为父元素选择器要求根据当前节点的子节点，来判断当前节点是否被选中，而父节点会先于子节点构建。> 这句话后半句好难理解，有大神能通俗地解释一下吗作者回复: 意思是DOM树构造到父节点的时候，还不知道它有没有子节点，所以算不出来CSS。
2019-02-1410
CC第一反应猜测 CSS 语法应该解析成对象（Object），然后根据 DOM 的树形结构，CSS 也会生成自己的树形结构。 查找验证后发现，这被称为 CSSOM（CSS Object Model）。 举个 CSSOM 的例子： body {font-size: 16px;} h1 {font-size: 2rem;} .orange {color: orange;} div {margin: 1rem 0;} div p {padding-bottom: 1rem;} 从根结点 body 开始，树形结构如下： * body {font-size: 16px;} * h1 {font-size: 2rem;} * .orange {color: orange;} * div {margin: 1rem 0;} * div p {padding-bottom: 1rem;} 不知道这样理解是否准确？作者回复: 哈哈 CSSOM不是这样子的，CSSOM主要是DOM结构上的盒的描述，它基本上是依附于DOM树的。 你说的这个东西，比较接近的是CSS的语法树。
2019-02-148
乃乎CSS 没有父选择器那里讲得太好了，这个原因不能更合理作者回复: 其实Selector Level 4里面已经打破这个规则了，现在还是draft，也不知道最后能不能过。 要是真过了 webkit这块差不多得重写……
2019-02-2627- flow看到老师一个分享会的视频，说到DOM匹配css rule的时候是从右往左匹配的，为什么跟文章提到的后代选择器的匹配顺序相反呢？
作者回复: 哈哈，是这样的没错，但是你看，新加了这么多运算符，所以思路也会有不一样。 其实浏览器实现是比较懒的，直接每条规则都检查了，没做合并优化。
2019-02-1627 - Dylan-Tseng请问老师，有一点不是很明白，如果是在构建dom树的同时，就开始构建css，带空格选择子元素的时候，css怎么知道dom树有没有构建完成，是否有没有子元素，是怎么做匹配的？
作者回复: 并不管有没有子元素，只是让这条规则前进一格。
2019-02-202 
啊咩|| 列选择器 是最新的标准出的吗？ 我在w3school和 菜鸟教程 都找不到这个选择器作者回复: Selector Level 3里的，不过不太重要，不用太在意。
2019-02-221
么么按照文章的描述，css的匹配好像是从左到右匹配的，但是网上有很多文章说的是从右往左进行匹配的，这样的规则可以优化重复选择计算。那这种说法与文章上的是否右冲突？作者回复: 是没错，浏览器多数实现是从右往左匹配的，这个说法早年我还设计过实验，但是现在我觉得这是比较偷懒的做法，实际上关于”实现“并没有一定的规定，我这里讲的也仅仅是一种思路。
2019-02-191