nth-of-type と nth-child の違い

CSS3 を調べていたときに、nth-of-type セレクターが使用されているのを見たことがなかったので、W3c で次のように説明されていることに気づきました。

:nth-of-type(

n) セレクターは、親要素の特定の型の N 番目の子であるすべての要素と一致します。

nth-childによく似ています

:nth-child(

n) セレクターは、要素の型に関係なく、親要素に属する N 番目の子要素と一致します。

では、この 2 つの違いは何でしょうか?試してみてください。

HTML:

リーリー

CSS:

リーリー

結果は同じようです:

ここで HTML を少し変更します:

リーリー

結果:

ここで

nth-child が機能しないことがわかります。これはなぜですか?

実際、p:nth-of-type(n) は親要素の下の n 番目の p 要素を指し、p:nth-child(n) は親要素の下の n 番目の要素を指し、この要素は p です。そうでない場合、選択は失敗します。

ここでの pox の下の最初の子要素は p ではなく div であるため、選択は失敗します。 p1 を赤にしたい場合、p1 が pox の下の 2 番目の子要素である場合は、nth-child(2) を選択し、 を次のように変更する必要があります。 リーリー

結果: