为什么 body 上的背景颜色不起作用？

Question

在我的浏览器中查看下面的代码时，背景是白色的。通用选择器 * 有 lowest specificity，body 选择器在通用选择器之后。不应该是灰色的吗？

* {
    background-color: white;
}

body {
    background-color: grey;
}

Answer 1

我认为 body 的背景确实发生了变化，但是由于 body 中的 children 受到 *选择器，其实是看不到的。 * 还选择了 body 的 children，并设置了这些元素的背景，覆盖了 body 的背景。

* { background-color: white }
body { background-color: grey }

<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>

与 <p> 相对定位以显示 body 的 background-color 的相同片段：

* { background-color: white }
body { background-color: grey }
p {
  position: relative;
  top: 50px;
}

<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>

此外，如果您的 body 是空的，t 将没有高度，因此基本上不可见。

Answer 2

您的 body 元素可能为空（或仅包含其他元素，但不包含直接文本）。

向 body 添加一些文本。你会看到它的背景是灰色的。

您的 * {background-color: white;} 为 html 元素和任何其他元素（[=11=] 除外）提供白色背景。因此，如果您的 body 仅包含一个 div 元素，则此 div 将具有白色背景，并且您不会看到灰色 body 背景，因为 div 完全填满。如果你给 body 一些 padding，你会看到背景颜色。

    * {
        background-color: white;
    }

    body {
        background-color: grey;
        padding:1%;
    }

Answer 3

* 选择所有元素和此代码

* {
    background-color: white;
}

将每个元素的背景颜色更改为白色。然后将正文背景颜色覆盖为灰色，因为元素选择器 'body' 比 *

更具体

body {
    background-color: grey;
}

你看不到它是因为你正文中没有任何内容。在这里你可以看到 css selectors and how to Calculating a selector's specificity

Answer 4

让我们分解问题中的代码：

* {
    background-color: white;
}

body {
    background-color: grey;
}

这是说：

Select 每个元素并使其背景颜色为白色。
Select body 元素并将其背景颜色设置为灰色。

嗯，如果 universal selector 说 select 所有元素 ，这将包括根元素 (html)。

因此代码计算为：

html {
    background-color: white;
}

body {
    background-color: grey;
}

根元素将canvas涂成白色，body元素没有高度，所以canvas保持白色。

向您的页面添加一些内容或为 body 指定高度，您将看到灰色。

评论中的观察：

Interesting. But if we eliminate the * from the equation and just have the body, the page will be grey with or without height being specified. I don't quite understand why that is.

所以如果我们消除通用 selector，根元素的 background-color 会发生什么？

它重置为初始值：transparent（参见：3.2. the background-color property）

而当html元素的background-color为transparent时，浏览器使用body元素的background-color绘制 canvas.

3.11.2. The Canvas Background and the HTML <body> Element

For documents whose root element is an HTML HTML element or an XHTML html element: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element's first HTML BODY or XHTML body child element. The used values of that BODY element's background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.

为什么 body 上的背景颜色不起作用？

Why doesn't background color on body work?

html

css

css-selectors

css-specificity