将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绘制在整个视口上,但html元素本身并不会自动跨越视口的整个高度; 背景只是传播到视口.有关详情,请参阅此答案.

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

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

   与背景html自动传播到视口的方式类似,背景body将html自动传播到,除非您同时设置背景html.请参阅此答案以获得解释.因此,如果您只需要一个背景(在通常情况下),无论您使用第一个规则还是第二个规则都不会产生任何真正的差异.

   你可以,但是,结合背景样式html,并body与其他技巧来获得一些漂亮的背景效果,就像我在这里所做的.请参阅上面的链接答案.

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

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

   因为这完全打破了继承链为正常继承,如任何财产color,在设置这些属性*规则被认为是不好的做法,除非你有一个非常好的理由来打破继承这种方式(涉及中断继承需要你大多数使用情况只做一个元素,而不是所有元素).