CSS 中的样式未应用于 H1 元素

Question

我遇到了一个奇怪的问题，样式没有应用到 H1 元素。

代码：

p h1 {
  color: red;
}

<p>
  <h1>This is a header</h1>
</p>

Answer 1

您不能将标题（H1 到 H6）作为 p 的 child， 无效 HTML.

它不起作用，因为您的浏览器会在 h1 元素开始之前自动关闭 p 元素，留下下面生成的 DOM（代码）：

<p> </p>
<h1>This is a header</h1>
<p> </p>

使用 F12 访问浏览器的开发者工具或使用 CTRL + U查看源码可以看到上面这个生成的DOM.

相反，您可以在 p 或标题（H1 到 H6）中包含 span

h1 {
  color: red;
}
h2 span {
  color: green
}
p span {
  color: blue
}

<h1>This is a header</h1>
<h2><span>This</span> is a second header</h2>
<p><span>This</span> is a paragragh</p>

在 W3C 规范中查看有关 headings contents and phrasing elements 的更多信息

Style is not being applied to H1 element in CSS