Специфичность

Но порядок — это не всё. Прежде чем смотреть на порядок, каскад сравнивает специфичность селекторов, то есть насколько точно они указывают на элемент. Более специфичный селектор побеждает, даже если он написан раньше. Порядок решает только между селекторами одинаковой специфичности.

От самого специфичного к наименее специфичному:

1. id, например #title,
2. класс, селектор атрибута или псевдокласс, например .group, [target="_blank"] или :hover,
3. тип, например h1.

Универсальный селектор * не учитывается вовсе, поэтому любой другой селектор побеждает его.

.group {
	background-color: linen;
}

div {
	background-color: white;
}

Здесь группы остаются бежевыми, хотя правило для div идёт позже: класс специфичнее типа.

Если селектор состоит из нескольких частей, они складываются: один id побеждает любое количество классов, а один класс побеждает любое количество типов. Поэтому .group:hover (класс и псевдокласс) побеждает .group (только класс), и фон группы меняется при наведении. А footer p (два типа) победил бы p (один тип).

Стили в атрибуте style побеждают все селекторы. Это ещё одна причина избегать их: их трудно переопределить.