Why doesn't background color on body work?

问题

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;
}

回答1:

Let's break down the code in the question:

* {
    background-color: white;
}

body {
    background-color: grey;
}

This is saying:

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

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

So the code computes to:

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.

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

Observation made in the comments:

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.

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

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

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. 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.

回答2:

Your body element is probably empty (or contains only other elements, but not direct text).

Add some text to the body. You’ll see that its background will be grey.

Your * {background-color: white;} gives the html element and any other element (except body) a white background. So if your body contains only a div element, this div will have a white background, and you won’t see the grey body background because the div fills it out completely. If you give the body some padding, you’ll see the background color.

    * {
        background-color: white;
    }

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

回答3:

I think the body's background does change, but due to the children inside the body being affected by the * selector, you can't actually see it. The * also selects the children of the body, and sets the background of those elements, covering the body's background up.

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

Same snippet with the <p> positioned relatively to reveal the body's 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>

Additionally, if your body is empty, t won't have a height, thus making it essentially invisible.

回答4:

* selects all the elements and this code

* {
    background-color: white;
}

changes every element's background color to white. Then you override the body background color to grey because the element selector 'body' is more specific then *

body {
    background-color: grey;
}

you don't see it because you don't have any content in the body. Here you can see the css selectors and how to Calculating a selector's specificity

来源：https://stackoverflow.com/questions/34698257/why-doesnt-background-color-on-body-work

标签

html

css

css-selectors

css-specificity