Правило !important (важно) — это способ сделать правила, которые должны реагировать одинаково независимо о того, в какой части документа оно применяется (т.е. имеет приоритет над каскадностью и правилами наследования). Например, нужно задать чтобы цвет ссылок в любой части документа был красным. Для этого в начале CSS-файла достаточно прописать:
CSS
a {
color: red !important;
}
Теперь, если дальше по коду задать другой цвет ссылок, цвет все равно останется красным:
CSS
a {
color: red !important;
}
...
p a {
color: blue;
}
Цвет ссылки останется красным даже если непосредственно в HTML переопределить свойство:
HTML
<a href="" style="color: blue;">ссылка</a>
Правило !important можно отменить (перекрыть) только !important. Для вышеприведенного примера это выглядело бы так:
CSS
a {
color: red !important;
}
...
p a {
color: blue !important;
}
или
HTML
<a href="" style="color: blue !important;">ссылка</a>
Где можно использовать !important
удобно применять когда нужно что-то быстро поправить в чужом и/или большом коде, когда нет времени разбираться во всех правилах наследования
для стилей содержательной части, которая доступна для редактирования редакторам сайта. Задаем жестко свойства, чтобы редакторы ненароком не испортили дизайн (напрмиер цветовую гамму)
Пользовательская таблица стилей
В современных браузерах предусмотрена возможность в некоторой степени управлять оформлением просматриваемых веб-страниц — пользователь может применять собственные стили к просматриваемым страницам в Интернете например для указания более крупного шрифта.
Когда для элемента стили автора и стили пользователя не совпадают, правило !important помогает решить противоречие между таблицами стилями пользователя и автора (разработчика):
разработчик и пользователь не объявили правило !important — правила таблицы разработчика будут иметь приоритет над правилами таблицы пользователя
пользователь объявил important, а разработчик — нет — правила пользователя одержат вверх
только разработчик объявил правило !important — использоваться будет правило разработчика
и разработчик, и пользователь задали !important — правило пользователя будет иметь приоритет над правилом разработчика (в спецификации CSS1 было наоборот)
Недостатки применения !important
нарушает стандартные правила наследования таблиц стилей. Работа с такой стилевой таблицей (поиск ошибок, модернизация) будет более трудоемкой;
динамически (с помощью JavaScript) нет возможности переопределить свойство (это можно обойти, если менять не свойство, а класс).
Старайтесь избегать применения правила !important.
Заметки об Internet Explorer
IE6 не совсем адекватно воспринимает это правило:
CSS
a {
color: red !important;
color: blue;
}
Во всех браузерах ссылки будут красными, в IE6 синими. На этой особенности основан один из хаков для IE6. В IE7 ситуация была исправлена, но если он в quirks режиме, или не указать DOCTYPE, тогда IE7 ведет себя аналогично IE6.