セレクター nth-child および :nth-of-type の使用法の詳細な説明

今回は、セレクター nth-child と :nth-of-type の使用方法について詳しく説明します。 セレクター nth-child と :nth-of-type を使用する際の 注意事項 について説明します。 1 立ち上がって見てください。

まず 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 つのセレクターによって達成される効果は一貫しています。 2 番目の p タグのテキストが赤になります:

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

:nth-child セレクターの場合、単純な言葉で言えば、要素を選択することを意味します: :nth-child选择器，在简单白话文中，意味着选择一个元素：

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

对于:nth-of-type

1 これは段落要素

2 です。これは親タグ

の 2 番目の子要素です。

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

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

上記の例を少し変更します。次の HTML コードに示す 2 つのセレクターの違い:

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

または、上記の例と一致する CSS テスト コード:

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

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

この時点で、2 つのセレクターは結果をレンダリングします。異なる。

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

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

CSS3 でのポインターイベントの使用の詳細な説明

🎜 focus-within の使用の詳細な説明🎜🎜🎜

以上がセレクター nth-child および :nth-of-type の使用法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。