Стиль не применяется к элементу H1 в CSS

Question

У меня возникла странная проблема, стиль не применяется к элементу H1.

Код:

p h1 { 
 
    color: red; 
 
}

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

Answer 1

Вы не может иметь заголовок (H1 к H6) как ребенок из p, , что недействительная HTML.

Это не работает, потому что ваш браузер автоматически закрывать p элемент перед началом h1 элемента, оставляя вас с этим сгенерирована DOM (код) ниже:

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

Используя либо к Асесс F12 вашего инструменты разработчика браузера или используя CTRL + U для просмотра исходного кода, вы можете увидеть эту созданную DOM выше.

---

Вместо этого, вы можете иметь span внутри p или заголовок (H1 к 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>

Подробнее о headings contents и phrasing elements в W3C спецификации