一尘不染

将CSS应用于html,body和通用选择器*的区别?

html

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

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

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

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

阅读 721

收藏
2020-05-10

共1个答案

一尘不染

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

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

尽管的背景html是在整个视口上绘制的,但html元素本身不会自动跨越视口的整个高度;背景只是传播到视口。

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

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

与的背景html自动传播到视口类似,的背景也bodyhtml自动传播到,除非您也为其设置了背景html。因此,如果您只需要一个背景(在通常情况下),则使用第一条规则还是第二条规则都不会有任何实际的不同。

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

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

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

因为这打破继承链完全为正常继承,如任何财产color,在设置这些属性*规则被认为是不好的做法,除非你有一个 非常_好的理由来打破继承这种方式(即涉及中断继承大多数使用情况需要你仅针对其中一个元素(并非 _全部 )执行此操作)。

2020-05-10