Skip to main content

Селекторы, специфичность

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

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

Специфичность рассчитывается как числовое значение, состоящее из четырех частей: a, b, c, d, где:

  • a — стили, указанные в атрибуте style (инлайновые стили).
  • b — количество ID-селекторов.
  • c — количество классов, псевдоклассов и атрибутов.
  • d — количество элементов и псевдоэлементов.

Чем больше значение в каждой части, тем выше специфичность. Например:

  • Селектор #id имеет специфичность 0, 1, 0, 0.
  • Селектор .class имеет специфичность 0, 0, 1, 0.
  • Селектор div имеет специфичность 0, 0, 0, 1.

Правила расчета специфичности​

  1. Инлайновые стили (в атрибуте style) имеют наивысшую специфичность: 1, 0, 0, 0.
  2. ID-селекторы (#id) имеют специфичность: 0, 1, 0, 0.
  3. Классы, псевдоклассы и атрибуты (.class, :hover, [type="text"]) имеют специфичность: 0, 0, 1, 0.
  4. Элементы и псевдоэлементы (div, ::before) имеют специфичность: 0, 0, 0, 1.
  5. Универсальный селектор (*) и комбинаторы (например, >, +, ~) не увеличивают специфичность.

Приоритеты​

  1. Инлайновые стили (style="...") всегда имеют наивысший приоритет.
  2. Селекторы с !important:
    • Если к стилю добавлено !important, он переопределяет все остальные правила, независимо от специфичности.
    • Пример: color: red !important;.
  3. Специфичность:
    • Если нет !important, применяется правило с наибольшей специфичностью.
  4. Порядок в коде:
    • Если специфичность одинакова, применяется последнее объявленное правило.

Как управлять специфичностью?​

  1. Избегайте избыточных селекторов:
    • Используйте минимально необходимую специфичность.
    • Например, вместо div#content используйте #content.
  2. Используйте классы:
    • Классы имеют умеренную специфичность и легко переопределяются.
  3. Осторожно с !important:
    • Используйте !important только в крайних случаях, так как это усложняет поддержку кода.
  4. Порядок объявления:
    • Если специфичность одинакова, последнее объявленное правило имеет приоритет.

Вывод​

  • Специфичность определяет приоритет CSS-правил.
  • Инлайновые стили и !important имеют наивысший приоритет.
  • Используйте классы и избегайте избыточной специфичности для поддержания чистоты кода.

🚀 Источник: DeepSeek