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

Question

我遇到一个奇怪的问题，该风格未应用于H1元素。

代码：

＆＃13;

＆＃13;

p h1 {
  color: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你不能标题H1到H6）作为p的孩子，那个＆＃39; HTML无效。

它无法正常工作，因为您的浏览器会在p元素启动之前自动关闭h1元素，让您在下面生成这个生成的DOM（代码）：

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

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

相反，您可以在span或标题（p至H1）内设置H6

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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