Что такое специфичность CSS

Специфичность CSS — это механизм, определяющий, какие стили будут применены к элементу при конфликте правил. Чем выше специфичность селектора, тем выше его приоритет.

Порядок расчета (от высокого к низкому):

1. !important (игнорирует все остальные правила)
2. Встроенные стили (style="")
3. ID селекторы (#id)
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 */
li { color: green; }               /* 1 элемент = 001 */

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