CSSOM(CSS对象模型)的根元素是如何确定的

How is the root element of the CSSOM (CSS Object Model) determined

我一直在研究浏览器渲染,现在我刚刚谈到渲染过程中浏览器从原始 CSS.

构造 CSSOM 的部分

在我看到的所有教程中,作者似乎将 assumption/assertion 设为 body 元素是根元素,所有应用于正文的样式将默认应用于DOM 的其余部分,除非被另一个选择器明确覆盖。这里有一个例子 https://blog.logrocket.com/how-css-works-parsing-painting-css-in-the-critical-rendering-path-b3ee290762d3/

这里https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model

在这两种解释中——body 标签被假定为根,尽管 html 标签看起来应该是根。更重要的是 HTML 规范似乎不需要在标记中使用这些标记中的任何一个(虽然我可能误解了这一点)。

对我来说,在将样式应用于渲染树中的元素时,这似乎是一条非常重要的信息。如果不知道哪个元素是根元素,那么就不知道样式应该如何相互层叠。

所以我的问题本质上是,浏览器是否总是假定 body 元素是根,或者是否有一种方法可以确定哪个元素应该是浏览器 CSS 树中的根?

您将几个问题混为一谈,因此很难将此作为重复问题关闭,即使您自己提出的每个问题都已被提出并回答过。所以我希望这对您有所帮助!

How is the root element of the CSSOM (CSS Object Model) determined

根只是文档的根元素,或者html,请不要误解。

authors seem to make the assumption that the body element is the root (..) An example of this is here https://blog.logrocket.com/how-css-works-parsing-painting-css-in-the-critical-rendering-path-b3ee290762d3/

嗯,没有。该页面上的示例使用 "root" 作为它正在谈论的特定子树的顶部,它恰好在 <body> 那里,但这是巧合;这个例子很可能是 table,然后 <table> 就是 "root".

Whats more is the fact that the HTML specification doesn't seem to require EITHER of these tags in markup (maybe I'm misunderstanding this though).

<html><body> 的开始标记都是可选的,所以是的,它们可以从 HTML 文档中省略。 <head> 也一样。但是元素本身还在!所有内容都在 html 元素内,无论是否有开始标记。您可以通过加载 HTML 文档来自行测试,比如

<title>title</title>
<div>Hello world</div>

进入浏览器并检查它,您会看到 div 现在打包在 body 元素中,而标题在 head 元素中。没有办法解决这个问题。

现在令人困惑的部分是一些(但不是全部)应用于 body 的 CSS 样式被浏览器应用于 htmlbackground-color 例如;如果您将其分配给 body,整个浏览器 window 都会变色,而不仅仅是 body 区域。
这是很久以前的遗留行为,当时 html 元素不被认为是绘图 canvas;它不可设置样式,只有 body 具有样式属性(BGCOLOR、TEXT、LINK 等)。尽管不再是这种情况,但出于兼容性目的,浏览器仍然表现得像它一样。