Ответ
Приоритет селекторов в CSS определяет, какие стили будут применены к элементу при наличии конфликтующих правил. Основные правила:
- !important - наивысший приоритет (но злоупотреблять не стоит)
- Inline-стили (style="...")
- ID (#element)
- Классы, атрибуты, псевдоклассы (.class, [type="text"], :hover)
- Элементы, псевдоелементы (div, ::before)
Чем специфичнее селектор - тем выше приоритет. При равной специфичности побеждает последнее объявленное правило.
#header .menu li { color: red; } /* 1 ID + 1 класс + 1 элемент = 111 */
.menu li.active { color: blue; } /* 2 класса + 1 элемент = 021 */В примере первый селектор имеет больший вес, поэтому цвет будет красным.