将 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 {
       color: black;
       background-color: white;
   }
   

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

   虽然html的背景被绘制在整个视口上，但html元素本身并不会自动跨越视口的整个高度；背景只是简单地传播到视口。详情请见this answer。

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

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

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

   但是，您可以将html 和body 的背景样式与其他技巧结合起来，以获得一些漂亮的背景效果，例如I've done here。请参阅上面链接的答案。

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

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

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