Difference between div~div and div:not(:first-of-type)?

Both are same in terms of matching elements. Let us see an example:

<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>

If you have CSS rules with both selectors matching the same elements, then your div: not(:first-of-type) will get precedence due to the: first-of-type pseudo-class.