Comparison
The cascadevsSpecificity
The cascade
two rules both apply to the element and the browser follows a fixed set of tie-breaks to pick one.
The algorithm that resolves competing declarations for the same property on the same element, in order: origin and importance, then cascade layer, then specificity, then source order. It is deterministic, which means every 'CSS is unpredictable' complaint is really a step in this list that was not checked. Knowing the order matters because the fix is different at each step, and reaching for `!important` skips the diagnosis entirely.
Full entry →Specificity
your new rule does nothing until you nest it one level deeper, and now it wins.
A three-part score — ids, then classes and attributes and pseudo-classes, then elements — compared left to right to break a tie between rules. It is not a single number, so a hundred classes never beat one id, and adding a selector to win is how a stylesheet ends up with rules nobody dares delete. It only comes into play after origin and layer have already been decided, which is why a rule in a later layer can win with a much lower score.
Full entry →