当应用于同一个HTML文档时,这三个规则如何不同?
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元素的所有后代继承其颜色(但不是背景颜色),包括正文。 body元素没有默认的背景颜色,这意味着它是透明的,所以html的背景将显示直到,除非你为body设置了一个背景。
虽然html的背景画在整个视口上,但是html元素本身并没有自动跨越视口的整个高度;背景只是传播到视口。详见this answer。
>
body { color: black; background-color: white; }
此规则将颜色应用于body元素。身体元素的所有后代继承其颜色。
类似于html的背景如何自动传播到视口,body的背景会自动传播到html,除非你设置了html的背景。见this answer解释。因此,如果您只需要一个背景(在通常情况下),无论您使用第一个规则还是第二个规则,都不会产生任何实际的影响。
然而,您可以将html和body的背景样式与其他技巧相结合,以获得一些漂亮的背景效果,如I’ve done here.请参阅上述链接的答案。
>
* { color: black; background-color: white; }
此规则将颜色应用于每个元素,因此两个属性都不会被隐式继承。但是,您可以轻松地用任何其他方式覆盖此规则,包括上述两个规则之一,因为*在选择器特异性方面没有任何意义。