nth-of-typeとnth-childの違い

nth-of-type

たとえば

p:nth-of-type(3) {
    color: red;
  }

<div>
  <h1>見出し</h1>
  <p>テキスト１</p>
  <p>テキスト２</p>
  <h2>見出し</h2>
  <p>テキスト３</p> <!-- ←ここがredに -->
  <p>テキスト４</p>
  <p>テキスト５</p>
  <h2>見出し</h2>
</div>

3番目のpがredになる。

nth-child

p:nth-child(3) {
    color: red;
  }

<div>
  <h1>見出し</h1>
  <p>テキスト１</p>
  <p>テキスト２</p> <!-- ←ここがredに -->
  <h2>見出し</h2>
  <p>テキスト３</p>
  <p>テキスト４</p>
  <p>テキスト５</p>
  <h2>見出し</h2>
</div>

親要素の3番目の子要素がpの場合にredになる。

---

nth-of-typeだけでよくない？？