CSS3 セレクター :nth-child と :nth-of-type の違いを比較する

この記事では主に CSS3 セレクターの nth-child と :nth-of-type の違いを紹介します。これは非常に実用的です。必要な方は参考にしてください。最初に HTML 部分を見てみましょう。 ：

<section>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
</section>

そして、2 つのセレクターに対応する CSS コードは次のとおりです。

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

p:nth-of-type(2) { color: red; }

上記の例では、これら 2 つのセレクターによって達成される効果は一貫しています。 p タグの部分が赤になります:

上記 2 つのデモの最終的な効果は同じですが、2 つのセレクター間の違いは避けられません。

:nth-child セレクターの場合、単純な言葉で言えば、要素を選択することを意味します:

1 これは段落要素 :nth-child选择器，在简单白话文中，意味着选择一个元素：

1、这是个段落元素
2、这是父标签的第二个孩子元素

对于:nth-of-type2 です。これは親タグ

の 2 番目の子要素です。

:nth-of-type セレクターの場合、要素を選択することを意味します:

1. 親タグの 2 番目の段落の子要素を選択します

上記の例を少し変更します。次のHTMLコードに示すように、2つのセレクターの違いを参照してください。
現時点では、2 つのセレクターによってレンダリングされる結果は異なります。

p:nth-child(2) レンダリング結果は、2 番目の p タグのテキストが赤色になるのではなく、親タグの 2 番目の子要素である最初の p タグが赤色になります。

p:nth-of-type(2) のパフォーマンスは非常に強力であるようで、レンダリングしたい 2 番目の p タグを赤く染めます。

以上がCSS3 セレクター :nth-child と :nth-of-type の違いを比較するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。