将这三个规则应用于同一HTML文档有何不同?
html { color: black; background-color: white; } body { color: black; background-color: white; } * { color: black; background-color: white; }
此规则将颜色应用于html元素。html元素的所有后代都继承其color(但不继承background- color),包括body。该body元素没有默认背景颜色,这意味着它是透明的,这样html的背景将显示通过,直到除非你设置一个背景body。
html
color
background- color
body
尽管的背景html是在整个视口上绘制的,但html元素本身不会自动跨越视口的整个高度;背景只是传播到视口。
此规则将颜色应用于body元素。body元素的所有后代继承其color。
与的背景html自动传播到视口类似,的背景也body将html自动传播到,除非您也为其设置了背景html。因此,如果您只需要一个背景(在通常情况下),则使用第一条规则还是第二条规则都不会有任何实际的不同。
你可以,但是,结合背景样式html,并body与其他技巧来获得一些漂亮的背景效果,就像我在这里所做的。参见上面的链接答案。
此规则将颜色应用于 每个元素 ,因此这两个属性都不会隐式继承。但是您可以轻松地用其他任何规则来覆盖此规则,包括上面两个规则中的任何一个,因为*在选择器特异性方面实际上没有任何意义。
*
因为这打破继承链完全为正常继承,如任何财产color,在设置这些属性*规则被认为是不好的做法,除非你有一个 非常_好的理由来打破继承这种方式(即涉及中断继承大多数使用情况需要你仅针对其中一个元素(并非 _全部 )执行此操作)。