Специфика CSS — определяет, какие стили применяются к элементам. То есть, чем конкретнее селектор CSS, тем больше веса он имеет при определении стиля элемента.

Возьмем следующий HTML и CSS в качестве примера:

Какой в итоге цвет будет у элемента article? — Белый, так как CSS-селектор белого цвета фона более специфичен.

Чтобы убедится в этом, откроем консоль разработчика в браузере. Он покажет нам все стили, примененные к элементу в порядке специфичности.

Это изображение имеет пустой атрибут alt; его имя файла - 1*vDGsCcBAqVw8rfcjRyoolQ.png
В Chrome на вкладке «Элементы» в блоке Стили видно как упорядочиваются стили элемента в зависимости от их специфики и выделяет стили, которые перезаписываются более конкретными селекторами.

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

Селекторы элемента

Это стили, использующие только элемент в качестве селектора:

Селекторы классов

Стили, которые используют класс в селекторе:

Селекторы ID

Стили, которые используют идентификатор в селекторе:

Три уровня, описанные выше, являются наиболее распространёнными. Но есть еще два уровня, которые углубляются в тёмную сторону CSS …

Встроенные селекторы

Это стили непосредственно в HTML, применяемые в качестве атрибута:

!important селекторы

Если индивидуальный стиль объявлен как !inportant, то он переопределит все остальное:

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

Есть два селектора CSS с двумя разными весами. Давайте рассмотрим, как рассчитать вес CSS:

  1. Поскольку пять различных факторов влияют на специфичность CSS, мы используем пять чисел, для отслеживания, сколько раз мы видим тип селектора. Мы начинаем вес с нулевой специфичностью, которая представлена как (0, 0, 0, 0, 0). Каждая цифра представляет (# of !important, # of inline styles, # of IDs, # of classes, # of elements).
  2. Использование селектора #css-rocks section в качестве нашего первого примера подсчитайте каждый тип селектора и добавьте его к весам. Первое, что мы видим, это #css-rocks селектор идентификаторов. Наш вес сейчас (0, 0, 1, 0, 0). Далее мы видим селектор элемента, наш вес теперь (0, 0, 1, 0, 1). Это был последний элемент в селекторе, поэтому у нас есть окончательный вес. Стиль background-color: black; имеет вес (0, 0, 1, 0, 1)

Давайте сделаем это еще раз с другим селектором. Мы начнем с (0, 0, 0, 0, 0) и рассмотрим селектор article#css-rocks section.css-history. Рассматривая каждый атрибут слева на право:

Теперь у нас есть два веса для стиля background-color, который мы можем представить так:

Оба селектора имеют 1 в слоте ID. Вес CSS падает в слот класса, чтобы определить победителя. Поскольку второй селектор использует класс, а первый — нет, второй селектор более специфичен и поэтому «выигрывает».

Это основная идея специфичности CSS, но есть еще несколько моментов:

Все, что объявлено позже, побеждает. Например:

Оба стиля имеют специфику (0, 0, 0, 0, 1), но background-color: white; позже в таблице стилей, так что побеждает.

Атрибут !Important применяется только в том месте, где он объявлен.

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

Переопределение селектора

Это уникально для каждой ситуации, но можно последовать этому списку:

  1. Можно ли сделать стиль, который нужно переопределить, менее специфичным? Можно добавить дополнительный класс.
  2. Должен ли стиль, который вы пытаетесь изменить, быть прописанным в оригинальном селекторе? Можно установить стиль для базового компонента, который там не принадлежит.

Перевод статьи: «The Basic Guide to CSS Specificity».

Похожие записи