Question

我正在尝试找到此CSS级联/继承规则的解释。鉴于下面的示例，我认为em标签将被着色为＃000000，但我被告知em标签将被着色为＃ff0000。

我习惯于声明选择器的CSS特异性规则，但我从未真正考虑嵌套在具有样式的其他元素中的元素。在W3C规范中哪里描述了这种行为？（或任何其他来源）

HTML：

<!DOCTYPE html>
<html>
  <body>
     <div>Hello, this is an <em>important</em> announcement.</div>
  </body>
</html>

CSS：

* { color: #ff0000; }
div {color: #000000; }

Answer 1

您正在使用*选择文档中的所有元素，因此，如果我们详细说明，则实际意味着

div {
   color: red;
}

em {
   color: red;
}

/* And so on... */

当您为所有元素指定了红色时，它将应用红色

但是您的div是黑色的，因为您使用的元素选择器比*选择器更具体，因为它是最不具体的

因此，如果您希望em为黑色，则需要使用Demo

em {
   color: inherit;
}

或者更具体

div em {
   color: inherit;
}

Answer 2

当没有指定不同color的匹配规则时，它只会从其父级继承color。

*匹配em，因此颜色为#ff0000。 *是一个非常特殊的选择器，它匹配每个元素。在你的例子中，如果你写了：

，它基本上是等价的

em { color: #ff0000; }
div {color: #000000; }

Answer 3

这与嵌套无关。你有两个规则。一个说div元素有#000颜色，另一个说所有元素都有#f00颜色。第一条规则不适用于您的em（因为它不是div），第二条规则适用于inherit。它会用#f00覆盖默认的{{1}}值，这就是全部。

谈到特异性和嵌套，整个路径上的特异性值只是求和。