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

Question

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

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

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

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

Answer 1

1. html {
       颜色：黑色;
       背景颜色：白色；
   }
   

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

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

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

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

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

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

3. <代码>* {
       颜色：黑色;
       背景颜色：白色；
   }
   

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

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