为什么身体上没有背景颜色？ [英] Why doesn't background color on body work?

问题描述

当在浏览器中查看下面的代码时，背景为白色。通用选择器 * 具有最低特异性，并且 body 选择器位于通用选择器之后。不应该是灰色的吗？

When viewing the code below in my browser the background is white. The universal selector * has the lowest specificity, and the body selector comes after the universal selector. Shouldn't it be grey?

* {
    background-color: white;
}

body {
    background-color: grey;
}

推荐答案

问题：

* {
    background-color: white;
}

body {
    background-color: grey;
}

这是说：

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


2. 选择 body 它的背景颜色为灰色。

1. Select every element and make its background color white.
2. Select the body element and make its background color grey.

好吧，如果通用选择器表示选择所有元素，这将包括根元素（ html ）。

Well, if the universal selector says select all elements, this would include the root element (html).

因此代码计算为：

html {
    background-color: white;
}

body {
    background-color: grey;
}

根元素描绘画布白色，

The root element paints the canvas white, and the body element has no height, so the canvas remains white.

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

Add some content to your page or specify a height for body and you'll see gray.

p>

Observation made in the comments:

有趣。但是如果我们从方程中删除 * ，并且只有 body ，页面将是灰色的， code> height 。我不太明白为什么是这样。

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.

所以如果我们删除通用选择器，会发生什么？ background-color 的根元素？

So if we eliminate the universal selector, what happens to the background-color of the root element?

它重置为其初始值： transparent （请参阅： 3.2。 background-color 属性）

It resets to its initial value: transparent (see: 3.2. the background-color property)

当 background-color c $ c> html 元素是 transparent ，浏览器使用 background-color

And when the background-color of the html element is transparent, the browser uses the background-color of the body element to paint the canvas.

3.11.2。画布背景和HTML < body>
元素

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

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.

这篇关于为什么身体上没有背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！