html - 秒を見つける方法の要素?

Question

ID を使用せずに 2 番目の段落に一致する CSS セレクターはどれですか?

<div>
  <p>Apple</p>
  <p>Mango</p>
</div>

Answer 1

nth-childselector , set を使用して、2 番目の子を見つけることができます。<p>これにより、親の 2 番目の子であるすべての要素が選択されます。

p:nth-child(2) {
  background-color: lightblue;
}

<div>
  <p>Apple</p>
  <p>Mango</p>
</div>
<div>
  <p>Apple</p>
  <p>Mango</p>
</div>

または、特定の要素セットで 2 番目の子を見つけたい場合は、それらの要素を でラップできます<div>。

#wrapper p:nth-child(2) {
  background-color: lightblue;
}

<div>
  <p>Apple</p>
  <p>Mango</p>
</div>
<div id="wrapper">
  <p>Apple</p>
  <p>Mango</p>
</div>

Answer 2

を使用する必要がありますnth-child。

p:nth-child(2) {  
  color: #ccc;
}

REF: n 番目の子のしくみ