CSSのnth-of-typeとnth-childの違いは何ですか?

相違点: 一致する 2 つの要素は異なります。「:nth-of-type(n)」セレクターは、親要素に属する特定の型の N 番目の子要素と一致します。要素の型は制限されています。 「:nth-child(n)」セレクターは、その親要素に属する N 番目の子要素と一致し、要素の種類は制限されません。

(推奨チュートリアル: CSS ビデオ チュートリアル)

1. :nth-child() の選択セレクター

:nth-child(n) セレクターは、要素のタイプに関係なく、親要素に属する N 番目の子要素と一致します。n は数値、キーワード、または式です。

2, :nth-of-type(n)
:nth-of-type(n) セレクターは、親要素。要素のタイプに制限はありません。n には数値、キーワード、または式を指定できます。

3. 具体的な違い

最初にコードを見てみましょう

##p:nth-of- type (7) 選択した p 要素が配置されている親要素の下にある 7 番目の P 要素は次のとおりです。

7 番目の p

p:nth-child(6) 選択した p 要素が配置されている親要素の下にある 6 番目の子要素。この要素は P 要素です。つまり、

5 番目の p

結果

4、奇数と偶数を使用して、次のいずれかを照合できます。添え字が奇数であるか、偶数の子要素のキーワード

od は奇数を選択します Even は偶数を選択します

1. :nth-child(odd)

上記の例 p:nth-child(odd): P の親要素の下で奇数番号の要素が選択されており、その要素は P 要素であるため、は 2 番目の段落

です。

と <p>4 番目の段落。 </p> (p:n 番目の子(n) n=3 および n=5)

:n 番目の子(偶数)

-上記の例 p:nth-child(even): 選択されたのは P の親要素の下の偶数番号の要素であり、その要素は P 要素であるため、

番目になります。段落。

および

3 番目の段落。

と

5 番目の段落。

(p:nth-child(n) n=2 および n=4 および n=6)

3. :nth-of-type(odd)

   -上記の例 p:nth-of-type(odd): P の親要素の下にある奇数番号の P 要素が選択されているため、
   ; 最初の段落。

   および

   3 番目の段落。

   と

   5 番目の段落。

   (p:nth-of-type(odd) n=1、n=3、n=5)
4. :nth-of-type( Even)

   -上記の例 p:nth-of-type(even): 選択されたのは、P の親要素の下にある偶数の P 要素であるため、## になります。 #< ;p>2 番目の段落。

   
   と <p>4 番目の段落。 </p> ( p:nth-of-type(even) n=2 and n=4 ) ##5、 :nth-of-type(an b )および :nth-of-type(an b) ルールは上で説明したものと同じです。
a はサイクルの長さを表し、n はカウンタ (0 から始まります)、b はオフセット値です。

例: :nth-of-type(2n 1) は、1 番目、3 番目、および 5 番目の P 要素です。

プログラミング関連の知識の詳細については、以下を参照してください。 プログラミング入門

! ！

以上がCSSのnth-of-typeとnth-childの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。