Специфика CSS

Узнайте, что означает специфичность CSS и почему это важно

Что происходит, когда на элемент нацелены несколько правил с разными селекторами, которые влияют на одно и то же свойство?

Например, поговорим об этом элементе:

<p class="dog-name">Roger</p>

Мы можем иметь

.dog-name {
  color: yellow;
}

и еще одно правило, нацеленное наp, который устанавливает для цвета другое значение:

p {
  color: red;
}

И еще одно правило, нацеленное наp.dog-name. Какое правило будет иметь приоритет над другими и почему?

Введите специфику.Более конкретное правило победит. Если два или более правил имеютта же специфичность, побеждает тот, который появляется последним.

Иногда то, что на практике является более конкретным, немного сбивает с толку новичков. Я бы сказал, что это также сбивает с толку экспертов, которые не обращают внимания на эти правила так часто или просто игнорируют их.

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

Специфичность рассчитывается по соглашению.

У нас есть 4 слота, каждый из которых начинается с 0:0 0 0 0. Слот слева - самый важный, а крайний правый - наименее важный.

Как это работает для чисел в десятичной системе:1 0 0 0выше чем0 1 0 0.

Slot 1

Первый слот, крайний правый, наименее важен.

Мы увеличиваем это значение, когда у нас естьселектор типа. Тип - это имя тега. Если у вас есть более одного селектора типа в правиле, вы соответственно увеличиваете значение, хранящееся в этом слоте.

Примеры:

p {
} /* 0 0 0 1 */
span {
} /* 0 0 0 1 */
p span {
} /* 0 0 0 2 */
p > span {
} /* 0 0 0 2 */
div p > span {
} /* 0 0 0 3 */

Slot 2

Второй слот увеличивается на 3 вещи:

  • селекторы классов
  • селекторы псевдоклассов
  • селекторы атрибутов

Каждый раз, когда правило соответствует одному из них, мы увеличиваем значение второго столбца справа.

Примеры:

.name {
} /* 0 0 1 0 */
.users .name {
} /* 0 0 2 0 */
[href$='.pdf'] {
} /* 0 0 1 0 */
:hover {
} /* 0 0 1 0 */

Конечно, селекторы слота 2 можно комбинировать с селекторами слота 1:

div .name {
} /* 0 0 1 1 */
a[href$='.pdf'] {
} /* 0 0 1 1 */
.pictures img:hover {
} /* 0 0 2 1 */

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

.name {
} /* 0 0 1 0 */
.name.name {
} /* 0 0 2 0 */
.name.name.name {
} /* 0 0 3 0 */

Slot 3

В слоте 3 содержится самая важная вещь, которая может повлиять на вашу специфику CSS в файле CSS:id.

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

Примеры:

#name {
} /* 0 1 0 0 */
.user #name {
} /* 0 1 1 0 */
#name span {
} /* 0 1 0 1 */

Slot 4

Слот 4 зависит от встроенных стилей. Любой встроенный стиль будет иметь приоритет над любым правилом, определенным во внешнем файле CSS или внутриstyleв заголовке страницы.

Пример:

<p style="color: red">Test</p> /* 1 0 0 0 */

Даже если какое-либо другое правило в CSS определяет цвет, это правило встроенного стиля будет применяться. За исключением одного случая - если!important is used, which fills the slot 5.

Важность

Специфика не имеет значения, если правило заканчивается на!important:

p {
  font-size: 20px !important;
}

Это правило будет иметь приоритет над любым правилом с большей конкретностью.

Добавление!importantв правиле CSS делает это правило более важным, чем любое другое правило, в соответствии с правилами специфичности. Единственный способ, при котором другое правило может иметь приоритет, - это иметь!importantтакже и имеют более высокую специфичность в других менее важных слотах.

подсказки

В общем, вы должны использовать ту степень специфичности, которая вам нужна, но не более. Таким образом, вы можете создавать другие селекторы, чтобы перезаписывать правила, установленные предыдущими правилами, не сходя с ума.

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

Но в целом!importantне должно быть места в ваших файлах CSS.

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

Инструменты для расчета специфичности

Вы можете использовать сайтhttps://specificity.keegan.st/для автоматического расчета специфичности.

Это полезно, особенно если вы пытаетесь во всем разобраться, поскольку это может быть хорошим инструментом обратной связи.

Скачать мою бесплатнуюСправочник CSS


Больше руководств по css: