Связь между важными и спецификациями CSS

Рассматривая спецификацию спецификаций CSS, нет упоминания о том, сколько "баллов" имеет правило !important.

Когда один переопределяет другой? Что произойдет, если объявить за другим? Какое правило объявлено более важным? Есть какой-то шаблон?

Из его взглядов, !important применяется к тому, что для начала имеет больше особенностей. Но что произойдет, если я объявлю bazillion id, сложный с классами и глубоко вложенный? Будет ли это переопределять правила, установленные в другом, менее определенном правиле, отмеченном !important?

Ответ 1

Специфика в 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 имеется более конкретный селектор, так что один выигрывает.

Ответ 2

Я думаю об этом:

!important - это карта с пиками. Он превосходит все точки специфики. К вашему конкретному вопросу, !important будет переопределять bazillion id/classes.
!important сбрасывает каскад. Итак, если вы используете !important ниже другого !important, то применяются правила второго экземпляра.

Есть более технический ответ, но я думаю о !important.

Еще одно замечание: если вы используете !important, вам нужно отступить и проверить, что вы делаете что-то неправильно. !important подразумевает, что вы работаете против каскада CSS. Вы должны использовать !important в редких случаях.