Специфичность в CSS касается только селекторов , а не связанных с ними объявлений.!important относится к объявлению, поэтому оно само по себе не играет никакой роли в специфике.
Однако !important влияет на каскад , который является общим вычислениемстили для определенного элемента, когда к нему применяется более одного объявления свойства.Или , как кратко описывает Кристофер Альтман, :
!important - это карта пик .Он превосходит все точки специфичности.
Но не только это: потому что он влияет на каскад в целом, если у вас есть более одного селектора !important с правилом, содержащим объявление !important, соответствующеетот же элемент, то специфичность селектора будет продолжать применяться.Опять же, это просто из-за того, что к одному элементу применяется более одного правила.
Другими словами, для двух правил с неодинаковыми селекторами в одной и той же таблице стилей (например, одна и та же таблица стилей пользователя, одна и та же внутренняя таблица стилей автора илита же самая внешняя авторская таблица стилей), применяются правила с наиболее конкретным селектором.Если есть какие-либо стили !important, побеждает тот, который находится в правиле с самым конкретным селектором.Наконец, поскольку у вас может быть только что-то важное или нет, это достаточно далеко, чтобы влиять на каскад.
Вот иллюстрация различных вариантов использования !important и их применения.:
Объявление !important всегда переопределяет без него (за исключением IE6 и старше):
/* In a <style> element */
#id {
color: red !important;
color: blue;
}
Если естьболее одного !important объявления в правиле с одинаковым уровнем специфичности, позже объявленный выигрывает:
/* In a <style> element */
#id {
color: red !important;
color: blue !important;
}
Если вы объявляете то же правило и то же свойство вв двух разных местах, !important следует каскадному порядку, если важны оба объявления:
/* In an externally-linked stylesheet */
#id {
color: red !important;
}
/* In a <style> element appearing after the external stylesheet */
#id {
color: blue !important; /* This one wins */
}
Для следующего HTML:
<span id="id" class="class">Text</span>
Если у вас есть дваразные правила и одно !important:
#id {
color: red;
}
.class {
color: blue !important;
}
Это !important всегда выигрывает.
Но когда у вас более одного !important:
#id {
color: red !important;
}
.class {
color: blue !important;
}
Правило #id имеет более конкретный селектор, поэтому выигрывает один.