!important

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS CSS2
Значение по умолчанию Нет
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/cascade.html#important-rules

Описание

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

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

  1. !important добавлен в авторский стиль — будет применяться стиль автора.
  2. !important добавлен в пользовательский стиль — будет применяться стиль пользователя.
  3. !important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль автора.
  4. !important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.

Итог от применения !important в общем случае показан в табл. 1.

Табл. 1. Результат применения !important
Стиль автора Стиль пользователя Результат
BODY {
/* Серый цвет текста */
color: silver;

/* Размер текста 8 пунктов */
font-size: 8pt
}
 BODY {
/* Черный цвет текста */
color: #000;

/* Размер текста 12 пунктов */
font-size: 12pt
}

Lorem ipsum dolor sit amet...

Будет применяться стиль автора, а именно: установлен серый цвет текста, размер шрифта 8 пунктов.
BODY {
/* Серый цвет текста */
color: silver;

/* Размер текста 8 пунктов */
font-size: 8pt
}		 BODY {
/* Черный цвет текста, повышенная важность */
color: #000 !important;

/* Размер текста 12 пунктов */
font-size: 12pt
}

Lorem ipsum dolor sit amet...

Цвет текста будет установлен пользовательским, а размер шрифта останется исходным. В итоге увидим черный текст размером 8 пунктов.
BODY {
/* Серый цвет текста */
color: silver;

/* Размер текста 8 пунктов */
font-size: 8pt
}		 BODY {
/* Черный цвет текста, повышенная важность */
color: #000 !important;

/* Размер текста 12 пунктов, повышенная важность */
font-size: 12pt !important
}

Lorem ipsum dolor sit amet...

Будут использоваться все параметры пользователя. Текст станет отображаться как черный, размер 12 пунктов.
BODY {
/* Серый цвет текста, повышенная важность */
color: silver !important;

/* Размер текста 8 пунктов, повышенная важность */
font-size: 8pt !important
}		 BODY {
/* Черный цвет текста, повышенная важность */
color: #000 !important;

/* Размер текста 12 пунктов, повышенная важность */
font-size: 12pt !important
}

Lorem ipsum dolor sit amet...

При добавлении !important в ту и другую таблицу приоритет в этом случае имеет стиль пользователя. В результате текст станет черным, а размер его увеличится до 12 пунктов.

Синтаксис

Свойство: значение !important

Аргументы

У этого атрибута нет аргументов.

Пример

Валидный CSS
Валидный HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>important</title>
<style type="text/css">
P {
 background: url('/images/mklvfkwr.gif') no-repeat !important
}
</style>
</head>
<body>
<p>Минорная пентатоника с пониженной V ступенью также называется блюзовой пентатоникой.</p>
</body>
</html>