CSS中通用选择器的优先级

Question

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

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

＆＃13;

＆＃13;

* {
  background-color: grey;
}

body {
  background-color: blue;
}

p {
  background-color: red;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

*（通用）选择器对css特异性没有影响。 身体和p具有相同的特异性值（值1）。 因此，级联中决定选择哪种样式的下一步是源顺序。后来的规则将赢得早先的规则，因此，背景样式将是红色的。

Answer 2

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

＆＃13;

＆＃13;

html {
  background-color: grey;
}

body {
  background-color: blue;
}

p {
  background-color: red;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这与身体的蓝色风格重叠，可以用以下代码解释：

＆＃13;

＆＃13;

* {
  background-color: grey;
}

html {
 background-color: initial;
}

body {
  background-color: blue;
}

p {
  background-color: red;
}

＆＃13;

    <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>

＆＃13;

＆＃13;

＆＃13;

在第二个代码段中，我们将html元素的颜色更改重置为initial值。然后显示body的蓝色背景颜色，因此证明身体的蓝色仅被html元素掩盖。

这里还有一个截图（使用你的示例的chrome devtools），证明蓝色已应用于body元素，但仅被html元素屏蔽：