CSS Specificity and the Cascade

When several rules set the same property, the cascade decides which one wins. A rule with higher specificity beats one with lower specificity, whatever their order. Specificity is counted as three numbers: ids, then classes, attributes, and pseudo-classes, then element names. An id selector beats any number of class selectors, and a class beats any number of element selectors. When specificity is equal, the rule that appears later wins. Avoid !important and long selector chains, and prefer low-specificity class selectors so that styles stay easy to override.

p { color: black; }
.note { color: blue; }
p.note { color: green; }
#intro { color: red; }
p:first-child { font-weight: bold; }
a:hover, a:focus-visible { text-decoration: underline; }
.card > h2 + p { margin-top: 0; }