Специфичность селекторов определяет какие именно стили применить к элементу, если на него влияют сразу несколько css правил с разными селекторами. У какого правила это значение выше, то и применится для элемента. По-простому специфичность можно назвать “вес”, “приоритет” или “важность”.
Приоритет селекторов
Специфичность можно представить в виде трехзначного числа 000, в этом случае каждый селектор будет добавлять к этому числу свой вес, и чем больше будет число, тем приоритет выше.
- Селектор по идентификатору имеет самый высокий приоритет – 100.
- Классы, селекторы по атрибуту и с псевдоклассом имеют приоритет – 010.
- Селекторы по тегу и псевдоклассу
:hoverимеют приоритет – 001. - Универсальный селектор
*, комбинаторы+, >, ~и псевдокласс:where()веса не имеют. - Псевдоклассы
:is(), :has(), :not()принимают вес селектора объявленного внутри. - Если два селектора имеют одинаковый вес, то применяется тот который находится ниже по каскаду.
Наглядно протестировать специфичность селекторов можно в – онлайн калькуляторе специфичности.
Исключения
Самыми приоритетными являются стили в атрибуте style=”” у элемента, они перебивают любые другие стили любого веса.
Исключением является модификатор !important он игнорирует все правила и устанавливает выделенное свойство для элемента.