应用于HTML元素的样式总是被覆盖
我将样式应用于<html>元素和<body>元素。 是否有可能有对风格<html>元素的运用在<body的样式？
将CSS应用于<html>似乎不遵循CSS特殊性的常规规则。 这是真的？
例如：http://jsfiddle.net/59dpy/
尝试使所有背景颜色变为红色。
我将样式应用于<html>元素和<body>元素。 是否可以将<html>元素上的样式应用于<body>的样式？
适用于身体的风格？ 不是真的。 在你的问题中，你似乎对CSS的特殊性感到困惑：它定义了不同风格在相互冲突时如何在同一个元素上展开竞争，使更具体和最后定义的风格胜出。
如果html尝试将背景设置为蓝色，并且html.test尝试将背景设置为红色，则背景将变为红色，因为这更具体。
这不适用于子元素
这并不意味着这些规则会覆盖儿童的风格。 你似乎认为，因为html.test是一个比body更具体的选择器，所以html.test风格也应该覆盖body的风格。 事实并非如此！
级联样式表不会以这种方式工作。 样式只在继承适用的任何地方级联，直到子元素覆盖该样式。 孩子的风格总是会胜过父母的风格，如果孩子的风格是继承的风格（直到孩子的其中一个孩子重写了它），那么这种风格会逐渐下降到其子元素。
特异性说，除了任何竞争的风格之外，可以应用于html元素的最具体的风格胜出。 在你提供的jsFiddle中，没有任何竞争的样式，并且html元素现在是红色的。
而已; 特异性在这里没有更多的作用。 然后，您的身体元素被赋予一个黄色的背景颜色。 背景颜色默认情况下不会被继承，但即使它们是， 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;
}
如果你想要所有的背景为红色，为什么要为身体添加一个黄色背景？ 无论如何，你只需要更具体的东西。
.test2 { background: red; }
是你真正需要的。
计算特异性
一组嵌套选择器的实际特殊性需要进行一些计算。 基本上，你给每个ID选择符（“#whatever”）赋值为100，每个类选择符（“.whatever”）的值为10，每个HTML选择符（“无论”）的值为1.然后将它们全部添加嘿嘿，你有特殊的价值。
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 selector + id selector + class selector + HTML selector，1 + 100 + 10 + 1）
因此，如果使用所有这些示例，div p.tree（具有12的特异性）将胜过div p（具有2的特异性）和body＃content .alternative p将胜出所有这些，无论命令。
特异性 - CSS | MDN
链接地址: http://www.djcxy.com/p/89125.html