Как работают приоритеты CSS селекторов

Приоритеты CSS селекторов определяют, какие стили будут применены к элементу при наличии конфликтующих правил. Приоритет рассчитывается по весу селекторов:

1. Инлайн-стили (style="") - высший приоритет (1000)
2. ID (#id) - 100
3. Классы, псевдоклассы, атрибуты (.class, :hover, [type="text"]) - 10
4. Элементы, псевдоэлементы (div, ::before) - 1
5. Универсальный селектор (*) - 0

При равном весе побеждает правило, объявленное позже.

Пример:

#header .menu li { color: red; } /* 100 + 10 + 1 = 111 */
.menu li.active { color: blue; } /* 10 + 1 + 10 = 21 */
li { color: green; } /* 1 */

В этом случае сработает красный цвет, так как у первого правила наибольший вес.