!important
Заставляет объявление побеждать все обычные объявления независимо от специфичности.
Синтаксис
property: value !important;Примеры
Класс с !important побеждает id:
<style>
#title { color: crimson; }
.muted { color: gray !important; }
</style>
<h3 id="title" class="muted">Gray: !important beats even the id</h3>Примечания
!important — признак проблемы со специфичностью, а не её решение: перекрыть его можно только другим !important. Оправданные случаи — служебные классы вроде .hidden и переопределение чужих стилей, которые вы не можете изменить. Каскадные слои (@layer) и :where() обычно решают ту же задачу чисто.
См. также
- inherit, initial, unset, revert — Ключевые слова, которые работают в любом свойстве и по-разному его сбрасывают.
- @layer — Группирует стили в каскадные слои: более поздний слой побеждает независимо от специфичности.
- :where() — Работает как `:is()`, но всегда имеет нулевую специфичность.
В учебнике
- Каскад и специфичность — Какое правило побеждает, если несколько задают одно свойство: порядок, специфичность, наследование и !important.