为什么CSS后代无法识别？

Question

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

h2 p {
  color: red;
}

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

Answer 1

原因很简单，而且有些合乎逻辑：

不允许嵌套标题元素

很简单，因为这样做没有逻辑上的理由。标题遵循一些规则来定义网页的语义，但您违反了其中一条规则。

如果您验证代码，您将收到如下错误：

基本上你的浏览器正在改变你的 HTML 结构，你会看到这样的东西：

正如您所看到的，您的p元素不再属于，h2因此它不会被着色。所以解决方案是避免嵌套标题元素。

附带说明一下，如果p将 放在h3代码之前，您的代码将可以正常工作，因为浏览器在找到 时会破坏结构h3，然后立即关闭h2.

h2 p {
  color: red;
}

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