将CSS应用于html，body和通用选择器*的区别? [英] Difference in applying CSS to html, body, and the universal selector *?

问题描述

这三个规则在应用于同一HTML文档时有何不同?

 html {
    color: black;
    background-color: white;
}

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

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

解决方案

1.  html {
       color: black;
       background-color: white;
   }
    

   此规则将颜色应用于html元素. html元素的所有后代都继承其color(但不包括background-color)，包括body. body元素没有默认的背景颜色，这意味着它是透明的，因此，除非为body设置背景，否则html的背景将一直显示到.

   尽管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)的继承链，所以除非您有非常个正当理由，否则在*规则中设置这些属性被认为是不好的做法以这种方式破坏继承(大多数涉及破坏继承的用例要求您仅针对一个元素而不是全部 做到这一点.)

How are these three rules different when applied to the same HTML document?

html {
    color: black;
    background-color: white;
}

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

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

解决方案

1. html {
       color: black;
       background-color: white;
   }
   

   This rule applies the colors to the html element. All descendants of the html element inherit its color (but not background-color), including body. The body element has no default background color, meaning it's transparent, so html's background will show through until and unless you set a background for body.

   Although the background of html is painted over the entire viewport, the html element itself does not span the entire height of the viewport automatically; the background is simply propagated to the viewport. See this answer for details.

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

   This rule applies the colors to the body element. All descendants of the body element inherit its color.

   Similarly to how the background of html is propagated to the viewport automatically, the background of body will be propagated to html automatically, until and unless you set a background for html as well. See this answer for an explanation. Because of this, if you only need one background (in usual circumstances), whether you use the first rule or the second rule won't make any real difference.

   You can, however, combine background styles for html and body with other tricks to get some nifty background effects, like I've done here. See the above linked answer for how.

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

   This rule applies the colors to every element, so neither of the two properties is implicitly inherited. But you can easily override this rule with anything else, including either of the above two rules, as * has literally no significance in selector specificity.

   Because this breaks the inheritance chain completely for any property that is normally inherited such as color, setting those properties in a * rule is considered bad practice unless you have a very good reason to break inheritance this way (most use cases that involve breaking inheritance require you to do it for just one element, not all of them).

这篇关于将CSS应用于html，body和通用选择器*的区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！