将CSS应用于HTML,body和*有什么区别？

当应用于同一个HTML文档时，这三个规则如何不同？

html {
    color: black;
    background-color: white;
}

body {
    color: black;
    background-color: white;
}

* {
    color: black;
    background-color: white;
}

解决方法

>

html {
    color: black;
    background-color: white;
}

此规则将颜色应用于html元素。 html元素的所有后代继承其颜色(但不是背景颜色)，包括正文。 body元素没有默认的背景颜色，这意味着它是透明的，所以html的背景将显示直到，除非你为body设置了一个背景。

虽然html的背景画在整个视口上，但是html元素本身并没有自动跨越视口的整个高度;背景只是传播到视口。详见this answer。
>

body {
    color: black;
    background-color: white;
}

此规则将颜色应用于body元素。身体元素的所有后代继承其颜色。

类似于html的背景如何自动传播到视口，body的背景会自动传播到html，除非你设置了html的背景。见this answer解释。因此，如果您只需要一个背景(在通常情况下)，无论您使用第一个规则还是第二个规则，都不会产生任何实际的影响。

然而，您可以将html和body的背景样式与其他技巧相结合，以获得一些漂亮的背景效果，如I’ve done here.请参阅上述链接的答案。
>

* {
    color: black;
    background-color: white;
}

此规则将颜色应用于每个元素，因此两个属性都不会被隐式继承。但是，您可以轻松地用任何其他方式覆盖此规则，包括上述两个规则之一，因为*在选择器特异性方面没有任何意义。

原文地址：https://www.jb51.cc/css/218387.html