擬似クラスが動作していません

Question

私は初心者のhtmlです。 「スタイル」タグと「p」タグの間にタグを置くと、コードが機能しないのはなぜですか？

p:first-child { 
 
    color: red; 
 
}

<h1>example</h1> 
 
<!-- problem is here --> 
 

 
<p>Hello venus</p> 
 
<p>hello world</p>

Answer 1

必要があるかもしれません。

p:first-of-type{ 
 
color:red; 
 
}

<h1>example</h1> <!-- problem is here --> 
 

 
<p>Hello venus</p> 
 
<p>hello world</p>

First-child段落の最初の、ちょうど最初の子ではありません。

:first-child {color:red;} 
 

 
div h1:first-child {color: green;} 
 
div p:first-child {color: blue} /* match nothing */

<h1>example</h1> <!-- problem is here --> 
 

 
<p>Hello venus</p> 
 
<p>hello world</p> 
 

 
<div> 
 
    <h1>example</h1> <!-- problem is here --> 
 
    <p>Hello venus</p> 
 
    <p>hello world</p> 
 
</div>

Answer 2

p:first-child体の最初の子を狙っています。あなたは、あなたがfirst-of-typeを使用する必要がp:first-of-type

p:first-of-type { 
 
    color: red; 
 
}

<h1>example</h1> 
 
<!-- problem is here --> 
 

 
<p>Hello venus</p> 
 
<p>hello world</p>

Answer 3

それは、任意の要素の最初の子である何の要素 `p`はありません:first-of-typeセレクタ

p:first-of-type{ 
 
    color:red; 
 
}

<h1>example</h1> <!-- problem is here --> 
 

 
<p>Hello venus</p> 
 
<p>hello world</p>