Junior (0-2 years)HTML & CSS
How does CSS specificity work?
Quick answer
Specificity is the score the browser uses to decide which rule wins: inline styles beat IDs, IDs beat classes/attributes/pseudo-classes, and those beat elements. When scores tie, the last rule in the source wins.
Count a tuple (inline, IDs, classes, elements). #nav .item is (0, 1, 1, 0). div.card p is (0, 0, 1, 2). !important jumps the queue and should be a last resort; too many of them mean the specificity war is already lost.
A more maintainable approach is low-specificity utilities or a method such as BEM, plus CSS layers (@layer) so you can control order without stacking IDs. Attribute selectors and pseudo-classes (.btn:hover) count as classes. The universal selector * and the :where() pseudo-class add zero specificity.