html - 将 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 的背景绘制在整个视口(viewport)上，但是 html 元素本身并不会自动跨越整个视口(viewport)高度；背景只是传播到视口(viewport)。参见 this answer了解详情。

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

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

   类似于 html 的背景如何自动传播到视口(viewport)，body 的背景将自动传播到 html，直到除非您也为 html 设置背景。参见 this answer寻求解释。因此，如果您只需要一个背景(在通常情况下)，那么无论您使用第一条规则还是第二条规则都不会产生任何实际差异。

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

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

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

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