CSS中通用选择器的优先级

Question

我正在学习 CSS，并且对 * 选择器有疑问。我知道它会将其样式应用于文档中的每个元素。

但是，当我为正文和段落定义不同的样式（背景颜色）时，* 选择器中的样式仅应用于正文而不应用于段落。见https://jsfiddle.net/oz8a1rn4/1/

* {
  background-color: grey;
}

body {
  background-color: blue;
}

p {
  background-color: red;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero soluta enim aut! Nihil nam obcaecati, fugiat sint sit libero voluptate eos incidunt odio neque cum, dignissimos aperiam, magnam nisi debitis.</p>

Answer 1

据我了解，如果我错了，请纠正我，这是由于 css 级联的影响而发生的。 见intro to the css cascade.

*（通用）选择器对 css 特异性没有影响。 body 和 p 具有相同的特异性值（值 1）。 因此，级联中决定选择哪些样式的下一步是源顺序。后面的规则将战胜前面的规则，因此背景样式将是红色的。

Answer 2

这里发生的情况是样式background-color:grey 应用于HTML 元素，如下所示：

html {
  background-color: grey;
}

body {
  background-color: blue;
}

p {
  background-color: red;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero soluta enim aut! Nihil nam obcaecati, fugiat sint sit libero voluptate eos incidunt odio neque cum, dignissimos aperiam, magnam nisi debitis.</p>

这与body的蓝色样式重叠，可以用下面的sn-p来解释：

* {
  background-color: grey;
}

html {
 background-color: initial;
}

body {
  background-color: blue;
}

p {
  background-color: red;
}

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero soluta enim aut! Nihil nam obcaecati, fugiat sint sit libero voluptate eos incidunt odio neque cum, dignissimos aperiam, magnam nisi debitis.</p>

在第二个 sn-p 中，我们将 html 元素的颜色更改重置为 initial 值。这显示了body 的蓝色背景色，因此证明主体的蓝色只是被html 元素所掩盖。

这也是一个屏幕截图（chrome devtools 使用 your 示例）证明蓝色已应用于body 元素，但只是被html 元素掩盖：