-1

我将样式应用于<html>元素和<body>元素。是否可以让<html>元素上的样式应用于<body的样式？

应用 CSS<html>似乎并不遵循 CSS 特异性的通常规则。这是真的？

示例：http: //jsfiddle.net/59dpy/

尝试使所有背景颜色变为红色。

4

3 回答 3

2

如果你想要所有的背景都是红色的，为什么要在正文中添加黄色背景？无论如何，您只需要更具体的东西。

.test2 { background: red; }

是你真正需要的。

于 2013-06-24T22:44:25.987 回答
2

计算特异性

一组嵌套选择器的实际特异性需要一些计算。基本上，你给每个 ID 选择器（“#whatever”）一个值 100，每个类选择器（“.whatever”）一个值 10，每个 HTML 选择器（“whatever”）一个值 1。然后你把它们都加起来up and hey presto，你有特异性值。

p具有特异性 1（1 个 HTML 选择器）

div p特异性为 2（2 个 HTML 选择器，1+1）

.tree具有 10 的特异性（1 类选择器）

div p.tree具有 12 的特异性（2 个 HTML 选择器 + 一个类选择器，1+1+10）

#baobab具有 100 的特异性（1 个 id 选择器）

body #content .alternative p具有 112 的特异性（HTML 选择器 + id 选择器 + 类选择器 + HTML 选择器，1+100+10+1）

因此，如果使用所有这些示例，则 div p.tree（特异性为 12）将胜过 div p（特异性为 2），而 body #content .alternative p 将胜过所有这些示例，无论命令。

特异性 - CSS | MDN

于 2013-06-24T22:49:12.413 回答
1

我将样式应用于<html>元素和<body>元素。是否可以让<html>元素上的样式应用于<body>的样式？

适用于身体的风格？并不真地。在您的问题中，您似乎对CSS 的特殊性感到困惑：这定义了不同样式在发生冲突时如何在同一元素上竞争，更具体和最后定义的样式胜出。

如果html尝试将背景设置为蓝色，而html.test尝试将背景设置为红色，则背景将是红色，因为这更具体。

这不适用于子元素

这并不意味着这些规则会覆盖孩子们的风格。您似乎认为因为html.test比body更具体的选择器，html.test样式也应该覆盖body样式。事实并非如此！

级联样式表不是这样工作的。样式只在继承适用的地方向下级联，直到子元素覆盖该样式。子元素的样式将始终胜过其父元素的样式，然后如果它是继承样式，它将向下级联到其子元素（直到这些子元素中的一个再次覆盖它）。

特异性表示，在所有竞争样式中，可以应用于html元素的最具体的样式胜出。在您提供的 jsFiddle 中，没有任何竞争样式，并且html元素现在是红色的。

就是这样; 特异性在这里不再起作用。然后你的body元素被赋予黄色的背景颜色。默认情况下不继承背景颜色，但即使它们是，body也不会继承其父背景的背景，因为您专门为其分配了背景颜色。

您需要将样式专门应用于身体

在这种情况下，您需要使正文仅继承html元素的样式：

body { background-color: inherit; }

或者一开始就不给身体一种风格。

或者您需要为html元素何时应用测试类设置特定规则

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;
}
于 2013-06-24T23:15:35.837 回答