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

Question

我面临一个奇怪的问题,风格没有应用于H1元素.

码:

p h1 {
  color: red;
}

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

Answer 1

您不能将标题(H1to H6)作为a的子项p,这是无效的HTML.

它不起作用,因为您的浏览器p在h1元素启动之前自动关闭元素,让您在下面生成这个生成的DOM(代码):

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

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

相反,你可以有一个span 内部a p或一个标题(H1to H6)

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规范中有关标题内容和措辞元素的更多信息