将CSS应用到html，body和通用select器*有什么区别？

这三个规则在应用于相同的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元素的所有后代inheritance其color （但不包括background-color ），包括body 。 body元素没有默认的背景颜色，这意味着它是透明的，所以html的背景将直到显示，除非你为body设置背景。

   尽pipehtml的背景被绘制在整个视口上，但html元素本身并不会自动跨越视口的整个高度。 背景只是传播到视口。 看到这个答案的细节。

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

   此规则将颜色应用于body元素。 body元素的所有后代inheritance它的color 。

   与自动将html的背景传播到视口的方式类似， html的背景将自动传播到html ，除非您为html设置背景。 看到这个答案的解释。 正因为如此，如果你只需要一个背景（通常情况下），不pipe你使用第一条规则还是第二条规则都不会有什么实际的区别。

   但是，您可以将html和body背景样式与其他技巧结合使用，以获得一些漂亮的背景效果，就像我在这里所做的那样 。 请参阅上面的链接答案。

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

   这个规则将颜色应用于每个元素 ，所以这两个属性都不会被隐式地inheritance。 但是你可以很容易地用其他任何东西来覆盖这个规则，包括上面两个规则中的任何一个，因为*在select器特殊性中几乎没有意义。

   因为这会彻底地破坏通常inheritance的任何属性（如color的inheritance链，所以在*规则中设置这些属性被认为是不好的做法，除非有很好的理由以这种方式破坏inheritance（大多数涉及中断inheritance的用例需要你只做一个元素，而不是全部 ）。