Что такое специфичность селекторов

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

Правила расчета специфичности (от высокого к низкому):

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

Пример:

#header .menu li.active {} /* 100 + 10 + 1 + 10 = 121 */
div#sidebar a:hover {} /* 1 + 100 + 1 + 10 = 112 */

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