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

WBOY
リリース: 2016-09-15 11:15:18
オリジナル
1433 人が閲覧しました

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) を選択し、 を次のように変更する必要があります。 リーリー

結果:

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート