样式不适用于CSS中的H1元素 [英] Style is not being applied to H1 element in CSS

问题描述

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

代码：

p h1 {color：red;}

< p> < h1>这是一个标题< / h1>< / p>

H6 ）作为 p ，这是无效的HTML的子元素。

这不起作用，因为您的浏览器在 h1 元素启动之前自动关闭 p 元素，离开你用下面这个生成的DOM（代码）：

 < p> < / p为H. 
< h1>这是一个标题< / h1> 
< p> < / p为H. 
  

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

---

相反，您可以在 p 或一个标题（ span > H1 至 H6 ）

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

 < h1>这是一个标题< / h1>< h2>< span>这个< / span>是第二个标头< / h2>< p>< span>这个< / span>是一个paragragh< / p>  

查看更多关于标题内容和短语元素

I'm facing a strange problem, the style is not being applied to the H1 element.

Code:

p h1 {
  color: red;
}

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

解决方案

You can't have a heading (H1 to H6) as a child of a p, that's invalid HTML.

It's not working because your browser is automatically closing the p element before the h1 element starts, leaving you with this generated DOM (code) below:

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

Using either the F12 to acess your browser's developer tools or using CTRL + U to view the source code, you can see this generated DOM above.

---

Instead, you can have a span inside a p or a heading (H1 to 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>

See more about headings contents and phrasing elements in the W3C Specification

这篇关于样式不适用于CSS中的H1元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！