cssにおけるnth-childと:nth-type-ofの違い

611 ワード

最近仕事がなくて、css 3を研究してやはり価値があります
cssにおけるnth-childと:nth-type-ofの使用については、同じ機能を実現するのにあまり差がないようですが、本を調べてみると、やはり一定の使い方の違いがあります.
:nth-childは親要素の下の文字要素を選択できます.:nth-of-typeもできます.
Ele:nth-of-type(n)は親要素の下のn番目のele要素を指し、ele:nth-child(n)は親要素の下のn番目の要素を指し、この要素はeleであり、そうでなければ選択に失敗する.だから前者はもっと正確なようですが、多くのコードを見て後者の割合が大部分を占めていることがわかりました.
コードは次のとおりです.
<div>
<ul class="demo">
<p>zero</p>
<li>one</li>
<li>two</li>
</ul>
</div>

.demo li:nth-child(2)は
  • one
  • ノードを選択する.demo li:nth-of-type(2)では、
  • two
  • ノードが選択されます.