Когда несколько правил нацелены на один элемент, специфичность определяет, какое из них применится. Это оценка, вычисляемая из частей селектора, сравниваемая как кортеж (ids, classes, elements).
text
Inline style → 1,0,0,0 (highest, short of !important)
ID → 0,1,0,0
Class / attr / pseudo-class → 0,0,1,0
Element / pseudo-element → 0,0,0,1
Universal (*) → 0,0,0,0 (no weight)
Сравнивайте слева направо; первый столбец, в котором значения различаются, определяет победителя.
css
{ : red; }
{ : blue; }