CSS3 を調べていたときに、nth-of-type セレクターが使用されているのを見たことがなかったので、W3c で次のように説明されていることに気づきました。
:nth-of-type(n) セレクターは、親要素の特定の型の N 番目の子であるすべての要素と一致します。
nth-childによく似ています:nth-child(
n) セレクターは、要素の型に関係なく、親要素に属する N 番目の子要素と一致します。
では、この 2 つの違いは何でしょうか?試してみてください。HTML:
リーリー
リーリー
ここで 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) を選択し、 を次のように変更する必要があります。 リーリー