为什么 BODY 标签不覆盖 HTML 标签属性？ [复制]答案

【问题标题】：Why BODY tag doesn't override HTML tag properties? [duplicate]为什么 BODY 标签不覆盖 HTML 标签属性？ [复制]
【发布时间】：2021-02-05 12:24:43
【问题描述】：

我已将此 css 应用到我的 html 文档中：

html {
  background-color: red;
}

body {
  background-color: yellow;
}

页面背景变为红色而不是黄色。 body 位于 html 之后，因此它必须覆盖 html 的红色。为什么不发生？提前致谢。

【问题讨论】：

因为body的高度为0。
@Justinas 与 html 相同，高度也为 0
我想重新表述这个问题“HTML 还是正文？哪个应该松散？”
@TemaniAfif 否，html 默认具有自动高度。
@J.Sadi 不，它不会，由于背景传播，只有背景会覆盖整个屏幕（画布）。添加边框以查看：jsfiddle.net/wm3L1bno .. 它只是转换 html 内容，在这种情况下，8px 来自默认的正文边距。删除边距，边框将折叠：jsfiddle.net/wm3L1bno/1 .. 您还可以检查元素以注意实际高度

标签： html css css-specificity

【解决方案1】：

因为你的身体是空的（0px 高度）

如果我们改变正文的 h/w，你会得到这个（包括你可以重置的边距/填充）

html {
  background-color: red;
}

body {
  background-color: yellow;
  width: 100vw;
  height: 100vh;
}

有内容：

html {
  background-color: red;
}

body {
  background-color: yellow;
}

&lt;h1&gt;Body no longer empty&lt;/h1&gt;

【讨论】：

【解决方案2】：

HTML 和 BODY 元素是不同的元素，因此级联规则（包括您放置规则集的顺序）与此处无关。

您的困惑可能源于 CSS 有一些用于 HTML 和 BODY 元素的 special rules 的事实：

对于根元素是 HTML“HTML”元素或 XHTML“html”元素的文档，其“背景颜色”的计算值为“透明”，“背景图像”的计算值为“无”，用户代理必须而是在为画布绘制背景时使用该元素的第一个 HTML“BODY”元素或 XHTML“body”元素子元素的背景属性的计算值，并且不得为该子元素绘制背景。

因此，如果您只设置其中一个，那么这就是您将获得的颜色。

这里有一个红色的 HTML 元素。

html { background: red; }

这里有一个黄色的 HTML 元素，因为它从 BODY 元素中提取了颜色。

body { background: yellow; }

但是，由于您设置了两个，因此这些特殊规则不适用。

HTML 元素设置为红色并且 BODY 元素设置为黄色。

您只是看不到它，因为您的 body 元素没有内容，因此计算高度为零。

html { background: red; }
body { background: yellow; }

<p>Hello, world.
<p>Since there is content in the body, it no longer has a zero height, so you can see its background.

【讨论】：