そのようなHTMLがあるとしましょう：
<セクション>
< p >リトル< / p >
< p >貯金箱< / p > <！-このアイテムが必要->
< /セクション>
次のCSSは同じことを行います。
p ：nth- child （ 2 ） { 色 ： 赤 ; }
p ：nth-of- type （ 2 ） { 色 ： 赤 ; }
もちろん、これらのセレクターには違いがあります。
疑似クラス
：nth-childは 、
次の 場合に要素を選択することを意味します
。- この要素は段落です。
- これは、単一の親の2番目の要素です。
擬似クラス
：nth-of-typeの意味：
- 1つの親の2番目の段落を選択します。
マークアップが次のように変更されたとします：
<セクション>
< h1 >単語< / / h1 >
< p >リトル< / p >
< p >貯金箱< / p > <！-このアイテムが必要->
< /セクション>
現在、最初のオプションは機能しません。
p ：nth- child （ 2 ） { 色 ： 赤 ; } / *動作しない* /
2番目は引き続き機能します。
p ：nth-of- type （ 2 ） { 色 ： 赤 ; } / *引き続き動作* /
「機能しない」とは、
:nth-childセレクターが「ピギー」ではなく「リトル」という単語を選択することを意味します。 要素は両方の条件を満たしているため：1）これは親要素の2番目の要素であり、2）これは段落です。 「Continues to work」とは、これが親要素の2番目の段落であるため、セレクターが「Piggy」として選択され続けることを意味します。
<h1> <h2>後に
<h2>を追加すると、次の要素を持つセレクタは、段落が2番目の要素ではなくなるため、
何も選択しません。
:nth-of-typeが
:nth-of-typeのセレクターは引き続き機能します。
私には思え
:nth-of-type脆弱性
:nth-of-type少なく、一般的にはより便利です
:nth-childは引き続き主要な作品です。 「段落の場合、親ブロックの2番目の要素を選択したい」と思う頻度はどれくらいですか。 たぶん時々ですが、「2番目の段落を選択する」または「表の3行ごとに選択する」と思う方が多いでしょう。
「なぜnth-childでセレクターが機能しないのですか」と言うときのほとんどの状況は、タグの選択を忘れてしまい、必要なタグが必要なタグにならないことが原因です。 したがって、
:nth-childを使用する場合は、親から指定し、タグバインディングを使用しないことをお勧めします。
dl ：nth- child （ 2 ） { } / *このオプションは* /よりも優れています
dd ： n 番目の子（ 2 ） { } / * this * /
しかし、もちろん、それはすべて特定の状況に依存します。
ブラウザのサポート
:nth-of-typeかなりまともです... Firefox 3.5 +、Opera 9.5 +、Chrome 2 +、Safari 3.1 +、IE 9+。 より深いサポートが必要な場合はjQueryを使用します（セレクターを使用し、必要に応じてクラスを適用します）が、jQueryはサポートを停止しました
:nth-of-type 。 まれに使用することでそれを聞いたが、私には奇妙に思える。 このルートに進みたい場合、
サポートを返すプラグインを次に示します 。