CSS設定してて、なんか思い通りにならない。nth-childが違う所を参照するんだけど！ってことないですか？
nth-childは【同じタグ】ではなく【同じ親要素を持つタグ】に反応します。
そのため、兄弟要素に違うタグが混じっていても、そいつもカウントしちゃうわけです。
それって、ちょっと使いにくいですよね。
同じタグだけで取りたい時は、nth-of-typeがオススメです！

nth-childは参照先がずれる

上記のサンプルを見ていただきたいのですが、最初にh2タグがあり、同じ階層に兄弟要素としてpタグが並んでいます。
こういう状況はよくあると思いますが、ここで1つ目と2つ目の文章を強調したいと思い、p:nth-child(1)とp:nth-child(2)を指定すると、おかしなことが起きます。
1つ目に指定したp:nth-child(1)がどこにも反映されず、2つ目に指定したp:nth-child(2)が1文目に適応されます。
これはp:nth-child(1)が「pタグの1番目に適応」ではなく「1番目がpタグなら適応」という識別の仕方になっているからです。

nth-of-typeなら同じタグの中でn番目を参照できる

では、「pタグの1番目に適応」にしたい場合はどうするのか？
ここでnth-of-typeの出番です。p:nth-of-type(1)では、「pタグにタグタイプが一致する物の中で1番目に適応」になるので、思い通りの挙動が実現できます。
以下のサンプルを見てください。

HTML・スタイルは同じで、タグの指定部分のみnth-childからnth-of-typeに変更しています。
思い通りの形になっているはずです。