css - タグ SPAN がオンの場合、nth-child は機能しません

Question

これが私のコードです

<span></span>
<div class='box'>title</div>
<style>div.box:nth-child(1) { color: red; }</style>

spanボックスの上にあるタグまたはその他のタグを削除すると機能しますが、そのままにしておくと機能しません。なぜそうなのですか？

Answer 1

を使用し:nth-of-typeます。

基本的に:nth-childすべての兄弟を数えます。要素の種類は問いません。ただしnth-of-type、選択された要素が考慮されます。

Answer 2

div が 2 番目の子になったためです。:nth-of-type(n)代わりに使用してください。

 <style>
  div.box:nth-of-type(1) { color: red; }
 </style>

それは最初のものを選択しますdiv