将CSS应用于html，body和通用选择器*有什么区别？ [英] What's the difference in applying CSS to html, body, and the universal selector *?

问题描述

这三个规则在应用于相同的HTML文档时有何不同？

颜色：黑色;
背景颜色：白色;
}

body {
颜色：黑色;
背景颜色：白色;
}

* {
颜色：黑色;
背景颜色：白色;

解决方案

1.   html {
    color：black; 
   背景颜色：白色; 
   } 
     

   此规则将颜色应用于 html 元素。 html 元素的所有后代继承它的 color （但不是 background-color ），包括 body 。 body 元素没有默认的背景颜色，这意味着它是透明的，所以 html 的背景将显示直到和除非您为 body 设置了一个背景。

   
$ b 尽管 html 绘制在整个视口上， html 元素本身不会自动跨越视口的整个高度;背景只是传播到视口。有关详细信息，请参见此答案。

  body {
 color：black; 
背景颜色：白色; 
} 
  

此规则将颜色应用于 body code>元素。 body 元素的所有后代继承它的 color 。





与 html 的背景自动传播到视口类似， body 的背景将传播到 html ，直到并且除非你为 html 设置背景。有关解释，请参阅此答案。因此，如果您只需要一个背景（通常情况下），无论您使用第一条规则还是第二条规则都不会产生任何实际影响。





您可以将 html 和 body 的背景风格与其他技巧结合使用，以获得一些漂亮的背景效果，如我在这里完成了。 b color：黑色;
背景颜色：白色;
}


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





因为这会完全破坏通常继承的属性（例如 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屋！