ความแตกต่างระหว่าง div~div และ div:not(:first-of-type)?

ทั้งคู่เหมือนกันในการ match elements ตัวอย่าง:

<section>
  <div></div> <!-- div:first-child or div:first-of-type -->
  <div></div> <!-- div+div or div~div or div:nth-of-type(2) -->
  <p></p>
  <div></div> <!-- div+p+div or div~div or div:nth-of-type(3), but not div+div -->
</section>
<section>
  <h1></h1> <!-- h1:first-child -->
  <div></div> <!-- div:first-of-type or div:nth-child(2) -->
  <div></div> <!-- div~div or div:nth-of-type(2) or div:nth-child(3) -->
</section>

หากมี CSS rules ทั้งคู่ match elements เดียวกัน div:not(:first-of-type) จะได้ precedence เนื่องจาก :first-of-type pseudo-class