Специфичность селекторов определяет какие именно стили применить к элементу, если на него влияют сразу несколько css правил с разными селекторами. У какого правила это значение выше, то и применится для элемента. По-простому специфичность можно назвать “вес”, “приоритет” или “важность”.
Приоритет селекторов
Специфичность можно представить в виде трехзначного числа 000, в этом случае каждый селектор будет добавлять к этому числу свой вес, и чем больше будет число, тем приоритет выше.
- Селектор по идентификатору имеет самый высокий приоритет – 100.
- Классы, селекторы по атрибуту и с псевдоклассом имеют приоритет – 010.
- Селекторы по тегу и псевдоклассу
:hoverимеют приоритет – 001. - Дочерние или родственные селекторы (комбинаторы)
+,>,~, универсальный селектор*и псевдокласс:where()веса не имеют. - Псевдоклассы
:is(),:has(),:not()принимают вес селектора объявленного внутри. - Для псевдоклассов
:nth-child(),:nth-last-child(),:host()и:host-context()специфичность — это комбинация самого псевдокласса (0,1,0) и наиболее специфичного из селекторов в них. - Для псевдоэлемента
::slotted()специфичность представляет собой комбинацию самого псевдоэлемента (0,0,1) и специфичности селектора внутри него. - Если два селектора имеют одинаковый вес, то применяется тот который находится ниже по каскаду.
Наглядно протестировать специфичность селекторов можно в – онлайн калькуляторе специфичности.
Исключения
Самыми приоритетными являются стили в атрибуте style="" у элемента, они перебивают любые другие стили любого веса.
Исключением является модификатор !important он игнорирует все правила и устанавливает выделенное свойство для элемента.
https://html-css.blog/css/speczifichnost-css-selektorov/
Оставьте первый комментарий