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

Question

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

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

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

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

Answer 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自动传播到视口类似，的背景也body将html自动传播到，除非您也为其设置了背景html。因此，如果您只需要一个背景（在通常情况下），则使用第一条规则还是第二条规则都不会有任何实际的不同。

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

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

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

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