Question

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

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

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

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

Answer 1

```
html {
    color: black;
    background-color: white;
}
```
此规则将颜色应用于html元素。 html元素的所有后代都会继承其color（但不是background-color），包括body。 body元素没有默认背景颜色，这意味着它是透明的，因此除非您为html设置背景，否则body的背景将会显示。

虽然html的背景绘制在整个视口上，但html元素本身并不会自动跨越视口的整个高度;背景只是传播到视口。有关详细信息，请参阅this answer。
```
body {
    color: black;
    background-color: white;
}
```
此规则将颜色应用于body元素。 body元素的所有后代都继承其color。

与html的背景自动传播到视口的方式类似，body的背景会自动传播到html，除非您为{{设置背景1}}。有关说明，请参阅this answer。因此，如果您只需要一个背景（通常情况下），无论您使用第一条规则还是第二条规则都不会产生任何真正的差异。

但是，您可以将html和html的背景样式与其他技巧相结合，以获得一些漂亮的背景效果，例如I've done here。请参阅上面的链接答案。
```
body
```
此规则将颜色应用于每个元素，因此这两个属性都不会被隐式继承。但是你可以轻松地用其他任何东西覆盖这个规则，包括上述两个规则中的任何一个，因为* { color: black; background-color: white; }在选择器特异性方面没有任何意义。

因为这会完全破坏通常继承的任何属性（例如*）的继承链，所以在color规则中设置这些属性被认为是不好的做法，除非你有非常以这种方式打破继承的好理由（大多数涉及打破继承的用例都要求你只为一个元素执行它，而不是所有）。

将CSS应用于html，body和通用选择器*有什么区别？

1 个答案: