Чем отличается -child от -of-type?

Предположим, что у вас такая разметка:

<section>
   <h1>Words</h1>
   <p>Little</p>
   <p>Piggy</p>    <!-- Нужен этот элемент -->
</section>

Вариант p:nth-of-type(2) { color: red; } будет выбирать второй параграф одного родителя. И сработает правильно.

Вариант p:nth-child(2) { color: red; } будет выбирать второй элемент одного родителя, и срабатывать если он является параграфом. В данном случае выберется <p>Little</p> что неправильно.