The most common CSS debugging moment is: "I wrote a style, it's clearly in the stylesheet, and it's just not being applied." Nine times out of ten, this isn't a caching issue or a typo — it's another selector winning on specificity, regardless of source order.
Specificity is a three-part score, not one number
CSS specificity is calculated as three separate counts — ID selectors, then classes/attributes/pseudo-classes, then element and pseudo-element selectors — compared in that order. A single ID selector (specificity 1,0,0) beats any number of class selectors combined (0,n,0), no matter how many classes are stacked.
Source order is the tiebreaker, not the rule
When two selectors have identical specificity, the one that appears later in the stylesheet (or later in a set of merged stylesheets) wins. This is why "I added this rule below the other one and it still didn't apply" usually means the earlier rule had higher specificity, not that the browser is ignoring source order.
TeckForge's CSS Specificity Calculator takes a list of selectors and scores each one, sorting them by which would actually win a conflict — a fast way to settle a "why isn't this style applying" question without guessing.
