将 CSS 应用于 html、body 和通用选择器的区别 *? [英] Difference in applying CSS to html, body, and the universal selector *?

问题描述

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

How are these three rules different when applied to the same HTML document?

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 元素的所有后代都继承其 color(但不包括 background-color)，包括 body.body 元素没有默认背景颜色，这意味着它是透明的，因此 html 的背景将一直显示，除非您为 body.

This rule applies the colors to the html element. All descendants of the html element inherit its color (but not background-color), including body. The body element has no default background color, meaning it's transparent, so html's background will show through until and unless you set a background for body.

虽然html的背景被绘制在整个视口上，但html元素本身并不会自动跨越视口的整个高度；背景只是简单地传播到视口.有关详细信息，请参阅此答案.

Although the background of html is painted over the entire viewport, the html element itself does not span the entire height of the viewport automatically; the background is simply propagated to the viewport. See this answer for details.

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

此规则将颜色应用于 body 元素.body 元素的所有后代都继承其 color.

This rule applies the colors to the body element. All descendants of the body element inherit its color.

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

Similarly to how the background of html is propagated to the viewport automatically, the background of body will be propagated to html automatically, until and unless you set a background for html as well. See this answer for an explanation. Because of this, if you only need one background (in usual circumstances), whether you use the first rule or the second rule won't make any real difference.

但是，您可以将 html 和 body 的背景样式与其他技巧结合起来以获得一些漂亮的背景效果，例如 我在这里完成了.请参阅上面链接的答案.

You can, however, combine background styles for html and body with other tricks to get some nifty background effects, like I've done here. See the above linked answer for how.

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

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

This rule applies the colors to every element, so neither of the two properties is implicitly inherited. But you can easily override this rule with anything else, including either of the above two rules, as * has literally no significance in selector specificity.

因为这会完全破坏任何通常被继承的属性(例如 color)的继承链，所以在 * 规则中设置这些属性被认为是不好的做法，除非您有非常以这种方式中断继承的充分理由(大多数涉及中断继承的用例要求您只对一个元素执行此操作，而不是全部).

Because this breaks the inheritance chain completely for any property that is normally inherited such as color, setting those properties in a * rule is considered bad practice unless you have a very good reason to break inheritance this way (most use cases that involve breaking inheritance require you to do it for just one element, not all of them).

这篇关于将 CSS 应用于 html、body 和通用选择器的区别 *?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！