Why did it take me so long to learn this about CSS?

I guess I try to learn the bare minimum with CSS but I can't believe after all these years, I failed to understand this:

Scroll about half-way down: http://css-tricks.com/855-specifics-on-css-specificity/

I never knew any of that. I thought that if you did this, in this order:

#id1 { font-size: 15px }
.class1 { font-size: 12px }
<div id="id1" class="class1">Hi There</div>
 

Because the class definition came later (after) the id definition, I thought the "Hi There" text would be 12px not 15px, but because of Specificity, it is 15px. Me and my procedural brain, I guess.

This probably cost me days, maybe weeks of hang-banging and hair-pulling.