!важно

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

Когда объявление является важным, порядок приоритетов меняется на обратный. Объявления, помеченные как важные в таблице стилей агента пользователя, переопределяют все важные объявления в таблице стилей пользователя. Аналогично, все важные объявления в таблице стилей пользователя переопределяют все важные объявления в таблице стилей автора. Наконец, все важные объявления имеют приоритет над всеми анимациями.

Изменение порядка приоритетов для важных объявлений гарантирует, что пользователи со специальными потребностями, такими как персонализированные схемы цветов или крупные шрифты, могут переопределять стили автора при необходимости, отмечая некоторые объявления в своей таблице стилей пользователя как важные. Это также гарантирует, что вредоносные расширения не смогут переопределить важные стили агента пользователя, что может нарушить функциональность или отрицательно повлиять на безопасность.

Есть ли что-то, что имеет приоритет над важными объявлениями? Да, переходы. CSS-переходы — это способ управления скоростью, с которой свойство изменяется от одного значения к другому. Во время перехода от одного значения к другому свойство не будет соответствовать конкретному важному объявлению.

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

В этом примере свойства color и background-color будут переходить в состояние наведения за две секунды. Несмотря на то, что состояния по умолчанию являются обычными объявлениями, а состояния наведения являются объявлениями !important , переход происходит.

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

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

Хотя !important не является частью определения специфичности, оно с ней связано. Важные объявления переопределяют все другие объявления из того же источника и слоя каскада.

#myElement#myElement#myElement .myClass.myClass p:hover {
  color: blue;
}

p {
  color: red !important;
}

Этот пример демонстрирует случай чрезмерного указания селектора. Независимо от того, насколько высока специфичность селектора соответствия обычного объявления, важное объявление из того же источника и слоя каскада всегда будет иметь приоритет. В этом случае абзац всегда будет красным.

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

#myElement p {
  color: green !important;
}

p {
  color: purple !important;
}

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

Объявление сокращенного свойства с !important делает все подсвойства важными. Два следующих блока стилей селектора эквивалентны:

p {
  background: blue !important;
}

p {
  background-image: none !important;
  background-position: 0 0 !important;
  background-size: auto auto !important;
  background-repeat: repeat !important;
  background-origin: padding-box !important;
  background-clip: border-box !important;
  background-attachment: scroll !important;
  background-color: blue !important;
}

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

При добавлении флага !important к объявлению значения пользовательского свойства, оно делает присвоение значения важным. Флаг !important затем удаляется из значения пользовательского свойства. Флаг !important не передается как часть значения пользовательского свойства в функцию var().

:root {
  --myColor: red !important;
  --myColor: blue;
}
p {
  color: var(--myColor);
}
blockquote {
  color: var(--myColor);
  color: purple;
}

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

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

Даже при попытке переопределения стилей с высокой специфичностью, не находящихся под вашим контролем, таких как стили в плагине сторонних разработчиков, объявленные с помощью селектора id, вам не нужно использовать !important. Вместо этого рассмотрите возможность импорта скрипта таблицы стилей сторонних разработчиков в именованный или анонимный слой как ваш первый слой каскада, вместо использования !important. Пока внешние стили не включают важные объявления, ваши стили будут иметь приоритет над стилями виджета, независимо от специфичности.

Если вам необходимо переопределить внешнюю таблицу стилей, содержащую важные объявления, создайте слой каскада, содержащий необходимые переопределения, и объявите этот слой первым.

Важные стили из таблицы стилей пользователя имеют приоритет над важными объявлениями таблицы стилей автора, что означает, что добавление флага !important к стилям сайта не помешает отдельным пользователям со специальными потребностями, таким как крупные шрифты, переопределить ваши стили, добавив важные стили в свою собственную таблицу стилей пользователя.

• Специфика CSS
• Каскад CSS