css - 没有任何显式声明样式的嵌套 HTML 元素的 CSS 特性

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

score 3 · Accepted Answer

您正在使用*which 选择文档中的所有元素，所以如果我们详细说明这一点，它实际上意味着

div {
   color: red;
}

em {
   color: red;
}

/* And so on... */

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

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

所以如果你想让你em变黑，你需要使用Demo

em {
   color: inherit;
}

或者更具体地说

div em {
   color: inherit;
}

score 2 · Accepted Answer

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

*匹配em，所以颜色会#ff0000。*是一个非常特殊的选择器，它匹配每个元素。在您的示例中，如果您编写以下代码，它基本上是等效的：

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

score 2 · Accepted Answer

这与嵌套无关。你只有两条规则。一个说div元素有#000颜色，另一个说所有元素都有#f00颜色。第一条规则不适用于您的em（因为它不是 a div），第二条适用；它用覆盖默认inherit值#f00，仅此而已。

谈到特异性和嵌套，整个路径的特异性值只是简单地相加。

3 回答 3