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

Ответ 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 в редких случаях.