How does CSS specificity work? How do you calculate which styles apply?

Sample answer preview

Specificity determines which CSS rules apply when multiple rules target the same element. Higher specificity wins. Specificity is calculated as a score with four components, often written as (a, b, c, d). Each position represents a category of selectors.