В чем разница между nth-child и nth-of-type?

Введение

p:nth-child(2) сработает для второго элемента (выборка происходит среди всех элементов, вне зависимости типа; не важно p, li или a), который является p, если второй элемент во вложенности не p то он не сработает.

p:nth-of-type(2) сработает для, именно, второго p, если вообще есть такой элемент или количество таких элементов больше или равно 2.

Пример №1

Если у тебя во вложенном блоке элементы одного типа, то разницы между двумя данными псевдоклассами вы не увидите.

nth-child

div p:nth-child(2) { 
  background-color: #66ff66; 
} 
 
div p { 
  border: 1px solid black; 
}

<div> 
  <p>Первый параграф</p> 
  <p>Второй параграф</p>  <!-- Нужен этот элемент --> 
</div>

nth-of-type

div p:nth-of-type(2) { 
  background-color: #66ff66; 
} 
 
div p { 
  border: 1px solid black; 
}

<div> 
  <p>Первый параграф</p> 
  <p>Второй параграф</p>  <!-- Нужен этот элемент --> 
</div>

Пример №2

Если вы добавите, допустим, заголовок в начало, то p:nth-child(2) сработает для первого параграфа (второй элемент по порядку, который соответствует типу p).

В случае с p:nth-of-type(2) выбор будет происходить только среди элементов p, а второй по счету p, это то что нам нужно.

nth-child

div p:nth-child(2) { 
  background-color: #66ff66; 
} 
 
div p { 
  border: 1px solid black; 
}

<div> 
  <h1>Первый заголовок</h1> 
  <p>Первый параграф</p> 
  <p>Второй параграф</p>  <!-- Нужен этот элемент --> 
</div>

nth-of-type

div p:nth-of-type(2) { 
  background-color: #66ff66; 
} 
 
div p { 
  border: 1px solid black; 
}

<div> 
  <h1>Первый заголовок</h1> 
  <p>Первый параграф</p> 
  <p>Второй параграф</p>  <!-- Нужен этот элемент --> 
</div>

Абсолютно тот же принцип работает для first-child и first-of-type, если считать, что first-child равно nth-child(1) и first-of-type равно nth-of-type(1).

Думаю довольно понятно объяснение, если есть вопросы могу дополнить ответ.