Heres - простой пример, который показывает разницу между nth-child vs nth-of-type.

Рассмотрим следующий html

<div>
<p>I am first</p>
<div>I am secong</div>
<p>I am 3rd</p>
</div>

Использование nth-of-child

p:nth-of-child(2){
    background:red;
}

Красный фон будет применен к второму p-элементу внутри div.

Это происходит потому, что nth-of-child в основном означает поиск n-го p-тега (в этом случае 2-й тэг) внутри контейнера

Использование nth-child

p:nth-child(2){
    background:red;
}

Здесь не применяется css.

Это происходит потому, что nth-child в основном означает найти n-й тег внутри контейнера (в этом случае 2-й тег - div) и проверить, является ли он тэгом