特定の HTML 要素の選択において、`nth-child` セレクターと `nth-of-type` セレクターはどのように異なりますか?

nth-child または nth-of-type による特定の要素の選択

HTML では、以下に基づいてリスト内の特定の要素を選択する必要がある状況があります。マークアップ内の位置に関係なく、そのクラス名。これを実現するために、CSS は nth-child と nth-of-type という 2 つの重要なセレクターを提供します。

nth-child

nth-child を使用すると、相対的な位置に基づいて要素を選択できます。その兄弟たちに。たとえば、 div.myclass:nth-child(1) は、親コンテナ内の myclass クラスを持つ最初の要素を選択します。

例:

<code class="html"><div class="parent_class">
    <div class="myclass">my text1</div>
    <!-- omitted code -->
    <div class="myclass">my text2</div>
    <!-- omitted code -->
    <div class="myclass">my text3</div>
    <!-- omitted code -->
</div></code>

<code class="css">.parent_class:nth-child(1) { /* first .myclass within .parent_class */ }
.parent_class:nth-child(2) { /* second .myclass within .parent_class */ }
.parent_class:nth-child(3) { /* third .myclass within .parent_class */ }</code>

nth-of-type の使用

nth-of-type は nth-child に似ていますが、同じタグ名を持つ他の要素に対する相対的な位置に基づいて要素を選択します。この場合、 div.myclass:nth-of-type(1) は、異なるタグを持つ介在要素に関係なく、親コンテナ内の myclass クラスを持つ最初の要素を選択します。

例:

前と同じ HTML コードを使用します:

<code class="css">.myclass:nth-of-type(1) { /* first .myclass, regardless of its container */ }
.myclass:nth-of-type(2) { /* second .myclass, regardless of its container */ }
.myclass:nth-of-type(3) { /* third .myclass, regardless of its container */ }</code>

これらのセレクターを利用すると、指定されたクラス名の特定の要素を正確にターゲットにすることができ、複雑で動的なページ レイアウトが可能になります。文書構造内の位置に基づいて決定されます。

以上が特定の HTML 要素の選択において、`nth-child` セレクターと `nth-of-type` セレクターはどのように異なりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。