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

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

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

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

Ответ 1

Специфика в CSS относится только к селекторам, а не к их ассоциированным объявлениям. !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 в редких случаях.