Styles applied to HTML element are always overridden

 

I apply styles to the <html> element and to the <body> element. Is it possible to have the styles on the <html> element apply over the <body 's styles?

Applying CSS to <html> doesn't seem to follow the usual rules of CSS specificity. Is this true?

Example: http://jsfiddle.net/59dpy/

Try to make all background colors red.

I apply styles to the <html> element and to the <body> element. Is it possible to have the styles on the <html> element apply over the <body> 's styles?

Apply over the body's styles? Not really. In your question, you appear to be confused about CSS's specificity: this defines how different styles compete over the same element when they clash, with the more specific and last defined style winning out.

If html tries to set the background to blue, and html.test tries to set the background to red, the background will be red as that's more specific.

This doesn't apply to child elements

It does not mean those rules then override the childrens' styles. You seem to think that because html.test is more specific a selector than body , the html.test style should also override the body style. That's not the case!

Cascading style sheets don't work that way. Styles only cascade down wherever inheritance applies until a child element overrides that style. The child's style will always win out over its parent's style, and then that will cascade down to its child elements if it's an inherited style (until, again, one of those children overrides it).

Specificity says that out of any competing styles, the most specific one that could apply to the html element wins out. In your provided jsFiddle, there aren't any competing styles, and the html element is now red.

That's it; specificity has no more role to play here. Your body element is then given a background color of yellow. Background colors are not inherited by default, but even if they were, body would not ever inherit its parent's background because you assigned one to it specifically.

You need to apply your styles to the body specifically

In this scenario, you need to either make the body just inherit the html element's style: 

body { background-color: inherit; }

Or not give the body a style in the first place.

Or you need to set a specific rule for when the html element has the test class applied: 

html.test {
    background-color: red;
}
body {
    background-color: yellow;
}
html.test > body {
    /* Don't have a background color when the HTML should have one
    so that the HTML's background can show through. */
    background-color: transparent;
}

If you want all of the background red, why add a yellow background to the body? In any case, you just need something more specific. 

.test2 { background: red; }

is all you would really need.

Calculating Specificity

The actual specificity of a group of nested selectors takes some calculating. Basically, you give every ID selector (“#whatever”) a value of 100, every class selector (“.whatever”) a value of 10 and every HTML selector (“whatever”) a value of 1. Then you add them all up and hey presto, you have the specificity value.

p has a specificity of 1 (1 HTML selector)

div p has a specificity of 2 (2 HTML selectors, 1+1)

.tree has a specificity of 10 (1 class selector)

div p.tree has a specificity of 12 (2 HTML selectors + a class selector, 1+1+10)

#baobab has a specificity of 100 (1 id selector)

body #content .alternative p has a specificity of 112 (HTML selector + id selector + class selector + HTML selector, 1+100+10+1)

So if all of these examples were used, div p.tree (with a specificity of 12) would win out over div p (with a specificity of 2) and body #content .alternative p would win out over all of them, regardless of the order.

Specificity - CSS | MDN

链接地址: http://www.djcxy.com/p/89126.html

上一篇: 内联元素和行

下一篇: 应用于HTML元素的样式总是被覆盖