Question

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

将CSS应用于<html>似乎不符合CSS特性的通常规则。这是真的吗？

尝试将所有背景颜色设置为红色。

Answer 1

如果你想让所有背景变红，为什么要在身体上添加黄色背景？无论如何，你只需要更具体的东西。

.test2 { background: red; }

是你真正需要的。

Answer 2

计算特异性

一组嵌套选择器的实际特异性需要一些计算。基本上，你给每个ID选择器（“#whatever”）一个值100，每个类选择器（“.whatever”）值为10，每个HTML选择器（“whatever”）值为1.然后你将它们全部添加起来，嘿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）将胜出 over div p（具有2的特异性）和body #content。替代p将赢得所有这些，无论顺序如何。

Specificity - CSS | MDN

Answer 3

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

将应用于身体的样式？并不是的。在你的问题中，你似乎对CSS's specificity感到困惑：这定义了不同风格在相同元素碰撞时如何竞争，更具体和最后定义的风格获胜。

如果 html 尝试将背景设置为蓝色，并且 html.test 尝试将背景设置为红色，则背景将为红色，因为它更具体。< / p>

这不适用于子元素

它不意味着那些规则然后覆盖儿童的风格。您似乎认为，因为 html.test 比 body 更具体的选择器， html.test 样式也应该覆盖身体风格。事实并非如此！

层叠样式表不起作用。样式仅在inheritance应用的任何位置向下级联，直到子元素覆盖该样式。孩子的风格将总是胜过其父母的风格，然后将级联到其子元素，如果它是一个继承的风格（直到，再一次，这些孩子之一覆盖它。）

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

就是这样;特异性在这里没有更多的作用。然后，您的 body 元素的背景颜色为黄色。 Background colors are not inherited by default，但即使它们是， 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;
}

应用于HTML元素的样式始终被覆盖

3 个答案:

这不适用于子元素

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