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

在浏览器中查看下面的代码时，背景是白色的。通用选择器*具有lowest specificity，并且body选择器位于通用选择器之后。它不应该是灰色的吗？为什么身体上的背景颜色不起作用？

* { 
    background-color: white; 
} 

body { 
    background-color: grey; 
}

来源

2016-01-09 jakewies

这将是https://jsfiddle.net/13gjwLox/1/你只需要设置高度 –

有趣的。但是如果我们从等式中消除'*'并且只有'body'，那么在指定或不指定'height'的情况下页面将变为灰色。我不明白这是为什么。 – jakewies

我认为当你不设置高度时，html会继承body的背景颜色 - https：// jsfiddle。net/gbzmauLa /你可以在那个小提琴html中看到覆盖身体背景颜色 – Anonymous

让我们打破代码的问题：

* { 
    background-color: white; 
} 

body { 
    background-color: grey; 
}

这话说：

选择每一个元素，并使其背景颜色为白色。
选择body元素并使其背景颜色变灰。

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

因此，代码计算出：

html { 
    background-color: white; 
} 

body { 
    background-color: grey; 
}

根元素描绘在画布白色，body元件不具有高度，所以帆布保持白色。

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

观察提出的意见：

有趣。但是，如果我们从等式中消除*，并且只有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子元素或XHTML body传播背景属性的计算值。使用的BODY元素的背景属性的值是它们的初始值，并且传播的值被视为在根元素上指定的值。建议使用，HTML文档的作者指定BODY元素的背景为，而不是HTML元素。

来源

2016-01-09 21:40:57

另请参见[将CSS应用于html，body和*？有什么区别（http://stackoverflow.com/questions/7187569/whats-在差异在应用程序的css-to-html-body-and） – BoltClock

谢谢你我昨天工作过这一切，但很好的解释！所以基本上发生了什么是我为页面上的所有元素指定了一个白色的“背景颜色”，并为'body'元素指定了一个灰色背景颜色，但由于'body'元素只有一个它里面的'div'（它继承了'*'中白色的'background-color'），我只看到白色。一旦我删除了'div'并添加了一些随机文本和/或增加了'body'的'height'，我终于看到了一些灰色。我的想法是否正确？ – jakewies

嗨杰克，这是一个快速破解：你为页面上的所有元素指定了一个白色的“背景颜色”，并为'body'元素指定了一个灰色背景颜色。 *但由于'body'元素没有高度（大概没有内容），所以没有灰色背景可见。*因此，所有其他元素（包括'html'在代码中）在整个页面中都可见。 –

我觉得身体的背景确实变化，但由于身体内的儿童受着*选择，你不能真正看到它。 *也选择身体的孩子，并设置这些元素的背景，覆盖身体的背景。

* { 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>

相同片段，以相对定位揭示人体的background-color的<p>：

* { 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>

此外，如果你的身体是空的，T赢得了”没有一个高度，从而使它满意几乎看不见。

来源

2016-01-09 20:06:25 SeinopSys

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

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

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

* { 
     background-color: white; 
    } 

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

来源

2016-01-09 20:06:57 unor

*选择所有元素，并且该代码

* { 
    background-color: white; 
}

每个元素的背景颜色变为白色。然后，您可以覆盖身体的背景颜色为灰色，因为元素选择“身体”是更具体的再*

body { 
    background-color: grey; 
}

你看不到它，因为你没有在身体的任何内容。在这里你可以看到css selectors以及如何Calculating a selector's specificity

来源

2016-01-09 20:30:15 Kos

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

回答

相关问题