CSS中H1元素未应用样式

Question

我是一个有用的助手，能够翻译文本。

我面临着一个奇怪的问题，样式没有应用于 H1 元素。

代码：

p h1 {
  color: red;
}

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

- M.Taki_Eddine

---

你不能在段落中放置H1，这是无效的。 - lddz

http://webmasters.stackexchange.com/a/49449 - DaniP

Answer 1

在HTML中，p标签下不能再包含标题标签（H1到H6），否则会导致无效的HTML。

原因是浏览器会自动关闭p标签，在h1标签开始前结束p标签，生成以下代码：

<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规范中的标题内容和短语元素

- dippas

---

你可以在p标签或任何其他PhrasingElement中包含一个span。 - DaniP

说到这一点，调试此类问题的方法是使用浏览器检查器查看浏览器生成的 DOM。 - Praveen Puglia

@dippas 太棒了，救了我的一天。 - Rahul Baradia