Что знаешь о приоритете селекторов

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

1. !important - наивысший приоритет (но злоупотреблять не стоит)
2. Inline-стили (style="...")
3. ID (#element)
4. Классы, атрибуты, псевдоклассы (.class, [type="text"], :hover)
5. Элементы, псевдоелементы (div, ::before)

Чем специфичнее селектор - тем выше приоритет. При равной специфичности побеждает последнее объявленное правило.

#header .menu li { color: red; } /* 1 ID + 1 класс + 1 элемент = 111 */
.menu li.active { color: blue; } /* 2 класса + 1 элемент = 021 */

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