Javascript 关于浏览器如何根据css样式生成CSSOM的详细信息？

在上述情况下，cssom和dom是同步生成的。如果cssom首先生成，它如何知道dom是什么样子，并生成一个cssom树，它看起来像dom树加上css属性，如上图所示。为什么不根据css这样生成呢

当我的html如下所示时，我也可以使用上面的样式；

即使我的html看起来像这样

---

CSSOM不需要了解dom的任何信息，因为CSSOM只是一个样式规则树

您指的是渲染树，它是在DOM和CSSOM就绪后创建的

更清楚地说：

HTML开始被解析

此时将显示样式标记

解析器不会暂停DOM树的构建并启动构建CSSOM的过程

DOM树已生成+CSSOM已生成=浏览器开始生成渲染树

基于渲染树浏览器开始计算布局

在那幅画开始之后

---

您可以在下面的链接中找到详细的解释

如果将Javascript附加到HTML中会更复杂，因为JS对两者都有影响（只是原因不同）我只想理解一个简单的例子作为我的问题。没有javascript来动态附加html。我想知道浏览器如何逐行解析css，然后生成cssom。为什么树节点会这样排序？没有。因为此树（cssom）仅基于css选择器构建-有

body

选择器-

body

节点，

p

选择器（p只能出现在body中）因此

body->p

节点等等我们有

span

选择器，这是CSSOM

body->span

中的另一个节点，我们还有更复杂的选择器

p span

，它在CSSOM

body->p->span

中创建了另一个节点，这是个好问题！它仅基于CSS选择器-我们有

img

选择器，默认情况下它是

body img

，但适用于body中的所有img（无论它是在div、p、section中还是直接在body中）只有添加css选择器

div img

时，才会在CSSOM

div->img

中创建新节点，并且只包含

div

内图像的规则-此规则将通过级联从

主体img

获取规则，并在其上添加自己的规则我已经阅读了本文，但仍然不知道详细信息关于cssom是如何生成的。为什么它生成的cssom看起来像上面的图片，而不像其他树。根据css样式逐行生成cssom的规则是什么？它基于您的css选择器-cssom与您的HTML还没有连接。正如您所看到的，CSSOM只包含与css规则相关的节点，即使您的HTML包含更多不同的HTML标记