Главная/ CSS справочник/ Правило !important

Правило !important

Правило !important (важно) — это способ сделать правила, которые должны реагировать одинаково независимо о того, в какой части документа оно применяется (т.е. имеет приоритет над каскадностью и правилами наследования). Например, нужно задать чтобы цвет ссылок в любой части документа был красным. Для этого в начале CSS-файла достаточно прописать:


a {
color: red !important;
}

Теперь, если дальше по коду задать другой цвет ссылок, цвет все равно останется красным:


a {
color: red !important;
}
...
p a {
color: blue;
}

Цвет ссылки останется красным даже если непосредственно в HTML переопределить свойство:


<a href="" style="color: blue;">ссылка</a>

Правило !important можно отменить (перекрыть) только !important. Для вышеприведенного примера это выглядело бы так:


a {
color: red !important;
}
...
p a {
color: blue !important;
}

или


<a href="" style="color: blue !important;">ссылка</a>

Где можно использовать !important

  • удобно применять когда нужно что-то быстро поправить в чужом и/или большом коде, когда нет времени разбираться во всех правилах наследования
  • для стилей содержательной части, которая доступна для редактирования редакторам сайта. Задаем жестко свойства, чтобы редакторы ненароком не испортили дизайн (напрмиер цветовую гамму)

Пользовательская таблица стилей

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

Когда для элемента стили автора и стили пользователя не совпадают, правило !important помогает решить противоречие между таблицами стилями пользователя и автора (разработчика):

  • разработчик и пользователь не объявили правило !important — правила таблицы разработчика будут иметь приоритет над правилами таблицы пользователя
  • пользователь объявил important, а разработчик — нет — правила пользователя одержат вверх
  • только разработчик объявил правило !important — использоваться будет правило разработчика
  • и разработчик, и пользователь задали !important — правило пользователя будет иметь приоритет над правилом разработчика (в спецификации CSS1 было наоборот)

Недостатки применения !important

  • нарушает стандартные правила наследования таблиц стилей. Работа с такой стилевой таблицей (поиск ошибок, модернизация) будет более трудоемкой;
  • динамически (с помощью JavaScript) нет возможности переопределить свойство (это можно обойти, если менять не свойство, а класс).

Старайтесь избегать применения правила !important.

Заметки об Internet Explorer

IE6 не совсем адекватно воспринимает это правило:


a {
color: red !important;
color: blue;
}

Во всех браузерах ссылки будут красными, в IE6 синими. На этой особенности основан один из хаков для IE6. В IE7 ситуация была исправлена, но если он в quirks режиме, или не указать DOCTYPE, тогда IE7 ведет себя аналогично IE6.

Твой код:

Результат: