Коэффициент специфичности правил в CSS с примерами

Коэффициент специфичности в CSS — это система оценок, которая определяет, какие стили будут применены к элементу в случае конфликта правил. Каждый тип селектора имеет свой «вес», и при сравнении специфичности разных селекторов, применяемых к одному и тому же элементу, выигрывает селектор с наибольшей суммарной специфичностью. Специфичность измеряется четырьмя уровнями (значениями), которые часто записываются как четырехзначное число: (a, b, c, d).

1. a (в стилях не используется) — предназначено для селекторов встроенного стиля, например, стилей, определенных в атрибуте style HTML-элемента. Стили, заданные через атрибут style, всегда имеют наивысшую специфичность.
2. b — количество ID селекторов в правиле.
3. c — количество классов, селекторов атрибутов и псевдоклассов в правиле.
4. d — количество селекторов типов элементов и псевдоэлементов в правиле.

Примеры

Пример 1

Этот селектор имеет один ID, поэтому его специфичность выше, чем у селекторов классов или тегов.

Пример 2

Здесь два класса, поэтому специфичность составляет два уровня классов.

Пример 3

В этом правиле один ID селектор (#menu), один класс селектор (.active) и три тега селектора (ul, li, a), что дает в сумме специфичность (0, 1, 1, 3).

Пример 4

Здесь один псевдокласс (:hover) и один селектор тега (a).

Пример 5

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

Как работает специфичность

Когда на один HTML-элемент применяются разные CSS правила, специфичность каждого правила вычисляется на основе вышеописанных правил. Правило с наибольшей специфичностью «побеждает» и применяется к элементу. Если два правила имеют одинаковую специфичность, применяется правило, которое последнее по порядку в CSS.

Понимание специфичности важно для эффективной работы с CSS, поскольку это помогает избегать конфликтов стилей и обеспечивает больший контроль над внешним видом веб-страниц.