Specificity is the means by which a browser decides which of the matching CSS rules for a given property is the most relevant.
Broadly speaking the rules are chosen in the following order:
- rules marked !important
- those attached to the element itself (i.e. <div style="color:red;">)
- the rules with more ids in the selector (e.g. "#foo #bar" beats "#baz")
- rules with more classes (e.g. ".x .y .z" beats ".a .b", but they are both beaten by "#a" from the previous rule)
- rules with more tags (e.g. "body div span" beats "p strong")
- rules that don't apply to the element in question but are further up its inheritance chain