nth-child()とnth-of-type()は似ていますが、微妙に違いがあります。どちらもCSSで特定の子要素を選択するための擬似クラスです。
基本的に同じことができますが、違いはnth-child()は親からの全ての子要素の順番に基づいて要素を選択する場合に使用します。nth-of-type()は特定のタイプの子要素の順番に基づいて要素を選択する場合に使用します。
nth-child()は全ての子要素とのことなので、div要素やp要素、a要素をすべて含めた何番目なのかを指定します。対して、nth-of-type()は要素を指定して、その何番目なのかをします。
<div>
<p>Pの１番目です</p>
<div>DIVの１番目です</div>
<p>Pの２番目です/p>
<div>DIVの２番目です</div>
</div>
上記のHTMLに対して、p:nth-of-type(2)とするとp要素の２番目なので、赤字部分が対象になります。
