将CSS应用于html、正文和通用选择器*的区别？

这三个规则在应用于同一个HTML文档时有什么不同

html{
颜色：黑色；
背景色：白色；
}
身体{
颜色：黑色；
背景色：白色；
}
* {
颜色：黑色；
背景色：白色；
}

html{
颜色：黑色；
背景色：白色；
}

此规则将颜色应用于

html

元素。

html

元素的所有子元素都继承其

颜色（但不是
背景色
），包括
主体
。
body
元素没有默认的背景色，这意味着它是透明的，因此
html
的背景将一直显示，直到您为
body
设置背景

虽然
html
的背景绘制在整个视口上，但是
html
元素本身不会自动覆盖视口的整个高度；背景仅传播到视口。有关详细信息，请参阅

正文{
颜色：黑色；
背景色：白色；
}

此规则将颜色应用于

主体

元素。

主体

元素的所有后代继承其

颜色

与自动将

html

的背景传播到视口的方式类似，

body

的背景将自动传播到

html

，除非您也为

html

设置背景。请参阅以获取解释。因此，如果你只需要一个背景（在通常情况下），那么无论你使用第一条规则还是第二条规则都不会有任何实际的区别

但是，您可以将

html

和

body

的背景样式与其他技巧结合起来，以获得一些漂亮的背景效果，如。查看上面的链接答案了解如何操作

*{
颜色：黑色；
背景色：白色；
}

此规则将颜色应用于每个元素，因此这两个属性都不会隐式继承。但是您可以轻松地用其他任何东西覆盖此规则，包括上述两个规则中的任何一个，因为

*

在选择器特定性方面实际上没有任何意义

因为这会完全中断任何通常继承的属性（如

color

）的继承链，所以在

*

规则中设置这些属性被认为是不好的做法，除非您有很好的理由以这种方式断开继承（大多数涉及破坏继承的用例要求您只对一个元素进行破坏，而不是所有元素）

---

请注意，默认情况下，

正文

通常也有一个小的边距，

html

没有。哪种类型的元素是？块级还是内联？@SteveJorgensen，它实际上是一个小的填充；否则，背景不会扩展到整个页面。@zneak:实际上，它是一个边距。

正文

元素实际上不是“扩大"覆盖整个页面；

html

元素使用

主体

元素的背景，如果它自己的背景颜色被计算为

透明

，和/或它的背景图像被计算为

无

。这在中进行了描述。这意味着如果您使用默认页面并为

ht设置不同的背景ml

和

正文

，您会注意到

正文

实际上被边距抵消，而不是填充其内容。@zneak:您也可以单独在

正文

上应用背景和边框，以查看边距：相同，只是没有提及

*

（这是“微不足道的”）：对于稍后询问的程序员，相同：相关：