前提

nth-child と nth-of-type をなんとなく使っていた方向け

環境

CodePen

TL;DR

端的に言うと、

nth-child は、親要素の n 番目にマッチする場合
nth-of-type は、親要素にある指定の要素のうち、 n 番目にマッチする場合

にそれぞれスタイルが当たるようになっています。

See the Pen nth-child vs nth-of-type by FumiyaShibusawa (@smartponzu) on CodePen.

詳細

上記の CodePen をみてみると、div を親要素として、h2、p、p、pという順で子要素が並んでいるのが分かると思います。ここで以下のスタイルを当てます。

# nth-child {
  p:nth-child(1) { // これは当たりません。
    color: red;
  }
  p:nth-child(2) {
    color: red;
  }
}

# nth-of-type {
  p:nth-of-type(1) {
    color: red;
  }
  p:nth-of-type(2) {
    color: blue;
  }
}

nth-child の場合

親要素が持っている子要素のうち、 n 番目に対象の要素があった場合にのみスタイルが当たります。

CodePen の例でいうと、1番目の子要素に p タグはないので、 p:nth-child(1) にはスタイルが当たりません。 p タグが出てくるのは2番目からなので、 p:nth-child(2) であればスタイルは当たります。

nth-of-type の場合

親要素が持っている子要素の 指定するセレクター のうち、 n 番目に対象の要素があった場合にのみスタイルが当たります。この場合は、予め擬似クラスをあてるセレクター（ p タグ）に限定してくれます。 p:nth-of-type(1) であれば、子要素の中の p タグのうち、1番目のものにスタイルが当たります。

参考文献

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type