为什么CSS后代无法识别？

Question

为什么后代p在这种情况下不是红色？

h2 p {
  color: red;
}

<h2>h2
  <h3>h3</h3>
  <p>p</p>
</h2>

Answer 1

更新

我改写答案以使其更清楚。

---

首先。 不，您希望标题像往常一样运行时，您不能在header标记内包含任何标记。

在MDN中指出

  

允许的内容短语内容。

什么是措辞内容？再次查看MDN doc。

简单地说，这些标记只是文本，而文本标记不包括<p>。对于其中包含的内容，CSS不适用。

这就是为什么通常在标题元素之间不添加任何元素的原因。

---

通过简单的步骤即可显示<p>不为红色的原因。

1. 在此页中使用此JSfiddle或在OP中使用小提琴。
2. 右键单击检查<p>的元素
3. 请注意，浏览器解析的html将变为以下内容。

如此

<h2> h2
</h2>
  <h3>h3</h3>
  <p>p</p>

1. 然后在此JSfiddle中，右键单击并检查元素<p>。
2. 要动态更改页面元素，请拖动 <h3>h3<h3> <p>p<p>顶部。
3. 您会注意到元素<p>可以保持其红色，这表示CSS已经在工作。

因此，此问题是由浏览器将<h2><h3></h3></h2>解析为<h2></h2><h3></h3>引起的。这就是预设CSS无法生效的原因。

---

特殊添加

如@Alohci所述，如果我们使用DOM，请在此JSfiddle

中进行采样

结果与我们手动将h3元素拖到p元素顶部相同。

Answer 2

原因很简单，而且具有逻辑性：

  

不允许嵌套标题元素

完全是因为没有逻辑理由这样做。标题遵循某些rules来定义网页的语义，而您破坏了其中一个。

如果您validate your code，您将收到如下错误：

基本上，您的浏览器正在更改HTML结构，您将看到类似以下内容的内容：

如您所见，您的p元素不再属于h2，因此它不会变色。因此解决方案是避免嵌套标题元素。

请注意，如果将p放在h3之前，您的代码将起作用，因为浏览器在找到h3时会破坏结构，然后立即关闭h2。

h2 p {
  color: red;
}

<h2>h2
  <p>p</p>
  <h3>h3</h3>
</h2>

Answer 3

许多可能的原因：

• 您忘记将CSS代码放到正确的位置，或者您没有像这样链接样式表..pb

• css规则的顺序：

  i

• 不要在标题内添加标题。.illogic

• 也许刷新页面