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

なぜ:nth-of-type は:nth-of-type と呼ばれるのですか?それは「種類」で区別しているからです。つまり、ele:nth-of-type(n) は親要素

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

例:

1

1

2

.box p:nth-child(1){

Color:red; //.box配下の最初の子要素がp

ではないため選択に失敗しました。

}

.box p:nth-child(2){

Color:red //選択された要素は

1

} .box p:nth-child(3){ color:red //選択された要素は

2

}

.box p:nth-of-type(1){ Color:red //選択された要素は

1

}