当应用于同一个 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
元素的所有后代都继承其color
(但不是background-color
),包括body
。body
元素没有默认背景色,这意味着它是透明的,因此html
的背景将一直显示,除非您为body
设置背景>.虽然
html
的背景绘制在整个视口(viewport)上,但是html
元素本身并不会自动跨越整个视口(viewport)高度;背景只是传播到视口(viewport)。参见 this answer了解详情。 -
body { color: black; background-color: white; }
此规则将颜色应用于
body
元素。body
元素的所有后代都继承其color
。类似于
html
的背景如何自动传播到视口(viewport),body
的背景将自动传播到html
,直到除非您也为html
设置背景。参见 this answer寻求解释。因此,如果您只需要一个背景(在通常情况下),那么无论您使用第一条规则还是第二条规则都不会产生任何实际差异。但是,您可以将
html
和body
的背景样式与其他技巧结合起来,以获得一些漂亮的背景效果,例如 I've done here .有关操作方法,请参阅上面链接的答案。 -
* { color: black; background-color: white; }
此规则将颜色应用于每个元素,因此这两个属性都不是隐式继承的。但是你可以很容易地用其他任何东西覆盖这个规则,包括上面两个规则中的任何一个,因为
*
在选择器特异性方面实际上没有任何意义。因为这完全打破了任何通常继承的属性的继承链,例如
color
,在*
规则中设置这些属性被认为是不好的做法,除非你有非常以这种方式破坏继承的充分理由(大多数涉及破坏继承的用例要求您只对一个元素执行此操作,而不是所有)。
关于html - 将 CSS 应用于 html、body 和通用选择器的区别 *?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7187569/