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

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

* {
    background-color: white;
}

body {
    background-color: grey;
}

这是说:

选择每个元素并使其背景颜色为白色.

选择body元素并使其背景颜色为灰色.

好吧,如果通用选择器说选择所有元素,这将包括根元素(html).

所以代码计算为:

html {
    background-color: white;
}

body {
    background-color: grey;
}

根元素将画布绘制为白色,并且body元素没有高度,因此画布保持白色.

在页面中添加一些内容或指定高度body,您将看到灰色.

观察中的观察:

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

因此,如果我们消除了通用选择器,background-color根元素会发生什么？

它重置为初始值:( transparent见:3.2.background-color属性)

而当background-color的html元素transparent,浏览器使用background-color的的body元素画在画布上.

3.11.2.画布背景和HTML 元素

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