将CSS应用于HTML,body和*有什么区别?

当应用于同一个HTML文档时,这三个规则如何不同?
html {
    color: black;
    background-color: white;
}

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

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

解决方法

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

此规则将颜色应用于html元素。 html元素的所有后代继承其颜色(但不是背景颜色),包括正文。 body元素没有默认的背景颜色,这意味着它是透明的,所以html的背景将显示直到,除非你为body设置了一个背景。

虽然html的背景画在整个视口上,但是html元素本身并没有自动跨越视口的整个高度;背景只是传播到视口。详见this answer
>

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

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

类似于html的背景如何自动传播到视口,body的背景会自动传播到html,除非你设置了html的背景。见this answer解释。因此,如果您只需要一个背景(在通常情况下),无论您使用第一个规则还是第二个规则,都不会产生任何实际的影响。

然而,您可以将html和body的背景样式与其他技巧相结合,以获得一些漂亮的背景效果,如I’ve done here.请参阅上述链接的答案。
>

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

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

相关文章

前言 最近项目做完,用户需要兼容IE,于是开展了兼容性的调整工作。边调整边想感叹IE真是个沙雕。。特将...
前言 有些属性不是很常用,但是工作中遇到了,记录一下,方便学习。 1、text-indent text-indent 属性规...
前言 政府网站会遇到公祭日的时候,网站整体颜色变灰的情况。今天正好调了一下。在此把解决方案分享给大...
需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息。 实现过程 书写css...
html代码 css代码 效果图
在一些界面上 , 如果每个icon都去找图片还是相当麻烦的 , 直接使用css画出icon就方便的多了 , 下面两个...