【问题标题】:Difference in applying CSS to html, body, and the universal selector *?将 CSS 应用于 html、body 和通用选择器的区别 *?
【发布时间】:2011-11-03 11:50:10
【问题描述】:

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

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

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

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

【问题讨论】:

标签: html css css-selectors


【解决方案1】:
  1. html {
        color: black;
        background-color: white;
    }
    

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

    虽然html的背景被绘制在整个视口上,但html元素本身并不会自动跨越视口的整个高度;背景只是简单地传播到视口。详情请见this answer

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

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

    html 的背景如何自动传播到视口类似,body 的背景将自动传播到html,除非您也为html 设置背景。有关说明,请参阅 this answer。因此,如果您只需要一个背景(通常情况下),那么无论您使用第一条规则还是第二条规则都不会产生任何实际影响。

    但是,您可以将htmlbody 的背景样式与其他技巧结合起来,以获得一些漂亮的背景效果,例如I've done here。请参阅上面链接的答案。

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

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

    因为对于任何通常被继承的属性(例如color),这会完全破坏继承链,所以在* 规则中设置这些属性被认为是不好的做法,除非您有一个非常充分的理由以这种方式中断继承(大多数涉及中断继承的用例要求您只对一个元素执行此操作,而不是全部)。

【讨论】:

  • 请注意,默认情况下,body 通常也有一个小的边距,而html 没有。
  • 是什么类型的元素?块级还是内联?
  • @SteveJorgensen,它实际上是一个小填充;否则,背景不会扩展到整个页面。
  • @zneak:实际上,它一个边距。 body 元素并没有真正“扩展”以覆盖整个页面;相反,html 元素使用body 元素的背景,如果它自己的背景颜色计算为transparent 和/或其背景图像计算为none。这在spec 中有描述。这意味着,如果您使用默认页面并为htmlbody 设置不同的背景,您会注意到body 实际上是被边距偏移而不是填充其内容。
  • @zneak:你也可以单独给body应用背景和边框来查看边距:jsfiddle.net/BoltClock/vddbh
猜你喜欢
  • 2011-10-08
  • 2018-06-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多