Как в CSS определяется приоритетность стилей

Приоритетность стилей в CSS определяется по следующим правилам:

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

При равной специфичности побеждает последний объявленный стиль.

Пример:

#header .menu li { color: red; } /* 1 ID + 1 класс + 1 элемент = 111 */
.menu li.active { color: blue; }  /* 2 класса + 1 элемент = 021 */
li { color: green !important; }   /* !important всегда побеждает */

Совет: избегайте !important и слишком сложных селекторов - это усложняет поддержку кода.