为什么身体上的背景颜色不起作用？ [复制]答案

【问题标题】：Why doesn't background color on body work? [duplicate]为什么身体上的背景颜色不起作用？ [复制]
【发布时间】：2016-04-14 09:18:39
【问题描述】：

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

* {
    background-color: white;
}

body {
    background-color: grey;
}

【问题讨论】：

它将是jsfiddle.net/13gjwLox/1 你只需要设置高度
有趣。但是，如果我们从等式中删除 * 并只保留 body，则无论是否指定 height，页面都将是灰色的。我不太明白为什么会这样。
我认为当您不设置高度时，html 会继承主体的背景颜色 - jsfiddle.net/gbzmauLa 正如您在小提琴中看到的那样 html 会覆盖主体背景颜色
是的，这很有趣，这就是我发现的“在 html 元素上没有背景的情况下，正文背景将覆盖页面。如果 html 元素上有背景，则身体背景的行为就像任何其他元素一样。”这是证明jsfiddle.net/13gjwLox/3

标签： html css css-selectors css-specificity

【解决方案1】：

我认为主体的背景确实发生了变化，但是由于主体内部的子项受到* 选择器的影响，您实际上看不到它。 * 也会选择 body 的子元素，并设置这些元素的背景，覆盖 body 的背景。

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

&lt;p&gt;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&lt;/p&gt;

与<p> 相同的sn-p 相对定位以显示主体的background-color：

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

&lt;p&gt;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&lt;/p&gt;

另外，如果你的身体是空的，t 就没有高度，因此它基本上是不可见的。

【讨论】：

【解决方案2】：

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

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

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

    * {
        background-color: white;
    }

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

【讨论】：

【解决方案3】：

* 选择所有元素和这段代码

* {
    background-color: white;
}

将每个元素的背景颜色更改为白色。然后将主体背景颜色覆盖为灰色，因为元素选择器“主体”比 *

更具体

body {
    background-color: grey;
}

您看不到它，因为您的正文中没有任何内容。在这里你可以看到css selectors和如何Calculating a selector's specificity

【讨论】：

【解决方案4】：

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

* {
    background-color: white;
}

body {
    background-color: grey;
}

这是说：

选择每个元素并将其背景颜色设为白色。
选择body 元素并将其背景颜色设为灰色。

好吧，如果universal selector 说选择所有元素，这将包括根元素 (html)。

所以代码计算为：

html {
    background-color: white;
}

body {
    background-color: grey;
}

根元素将画布涂成白色，body 元素没有高度，因此画布保持白色。

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

在 cmets 中的观察：

有趣。但是，如果我们从等式中消除* 并只保留body，则无论是否指定height，页面都是灰色的。我不太明白为什么会这样。

那么如果我们去掉通用选择器，根元素的background-color 会发生什么？

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

当html元素的background-color是transparent时，浏览器使用body元素的background-color来绘制画布。

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

对于根元素是 HTML HTML 元素或 XHTML 的文档 html 元素：如果 background-image 的计算值在根元素是none，它的background-color是transparent，用户代理必须改为传播该元素的第一个 HTML BODY 或 XHTML 的背景属性 body 子元素。该BODY 元素的使用值背景属性是它们的初始值，而传播的值被视为在根元素上指定。它建议 HTML 文档的作者指定画布 BODY 元素而不是 HTML 元素的背景。

【讨论】：

另见What's the difference in applying CSS to html, body, and *?
谢谢你我昨天把这一切都解决了，但是很好的解释！所以基本上发生的事情是我为页面上的所有元素指定了一个白色的background-color，并为body元素指定了一个灰色的background-color，但是由于body元素内部只有一个div其中（从* 继承了白色的background-color），我只看到白色。一旦我删除了div 并添加了一些随机文本和/或增加了body 的height，我终于看到了一些灰色。我的想法对吗？
嗨，Jake，这里有一个简短的介绍：您为页面上的所有元素指定了白色的 background-color，并为 body 元素指定了灰色的 background-color。 但由于body 元素没有高度（可能没有内容），所以看不到灰色背景。 因此，包括html 在内的所有其他元素都使用白色背景（其中在代码中位于 body 之前），在整个页面中可见。
删除* 后，html 元素默认具有transparent 的background-color，但既然您指定body 具有background-color: grey，那么根据CSS 规则中，html 元素必须采用body 颜色，并且页面变为全灰色。希望这能澄清一点。所有细节实际上都在我的答案中。再过一遍。如果您还有其他问题，请在下面发布。干杯！