CSS :: Модификатор !important
css-модификатор !important (от англ. important – важный) используется для повышения приоритета стилевого правила. В случае необходимости !important указывается во внутренних и внешних таблицах стилей после значения css-свойства через пробел, например, p{color: green !important;}. Свойство стиля, в котором указан данный параметр, обладает наибольшим приоритетом в независимости от расположения таблицы стилей в коде документа или же самого правила внутри таблицы стилей, но только в ситуации, когда специфичности стилей равны (при этом не следует забывать, что специфичность встроенного стиля следует считать наивысшей в любом случае!). Опять же, если свойств с таким параметром несколько, да еще и специфичности соответствующих селекторов одинаковы, то приоритет будет определяться по виду стиля, расположению таблиц стилей или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы.
Всегда пытайтесь использовать специфичность, а не модификатор !important, т.к. он усложняет отладку, нарушая естественное каскадирование стилей.
Характеристики
- Значение по умолчанию: нет.
- Применяется: ко всем элементам.
- Наследуется: нет.
Синтаксис
свойство: <значение> !important
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/css-cascade-3/#importance
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/Specificity
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> /* Специфичность селектора выше */ div p.green_normal{ color: #007700; font-weight: normal; } /* Специфичность селектора ниже, */ /* плюс отсутствует !important */ .bold_wrong{ font-weight: bold; } /* Специфичность селектора ниже, */ /* но присутствует !important */ .bold_font{ font-weight: bold !important; } </style> </head> <body> <div> <p class="green_normal"> Получаем обычный текст, зеленого цвета. </p> </div> <div> <p class="green_normal bold_wrong"> Начертание не стало полужирным, т.к. приоритет<br> селектора .bold_font ниже, чем селектора div p.green_normal. </p> </div> <div> <p class="green_normal bold_font"> Цвет текста остался зеленым, но начертание стало полужирным,<br> т.к. в подключенном классе .bold_font присутствует !important. </p> </div> <div> <p class="green_normal bold_font"> Цвет текста остался зеленым, но начертание стало полужирным,<br> т.к. в подключенном классе .bold_font присутствует !important.<br> <span style="font-weight: normal">Но мое начертание осталось обычным,<br> т.к. встроенный стиль имеет наивысший приоритет.</span> </p> </div> </body> </html>
Пример №1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="robots" content="noindex"> <title>Пример №2</title> <!-- Подключаем внешнюю таблицу стилей --> <link rel="stylesheet" href="styles.css"> <style> /* Базовый класс */ div p.green_normal{ color: #007700; font-weight: normal; } /* Специфичность селектора такая же, как */ /* и у класса .bold_font во внешней CSS */ /* плюс также присутствует !important */ .normal_strong{ font-weight: normal !important; } </style> </head> <body> <div> <p class="green_normal bold_font"> Цвет текста остался зеленым, но начертание стало полужирным,<br> несмотря на то, что класс .green_normal находится во внутренней<br> таблице стилей, поскольку в подключенном классе .bold_font из<br> внешней таблицы стилей присутствует параметр !important. </p> </div> <div> <p class="green_normal normal_strong"> Цвет текста остался зеленым, но начертание полужирным не стало,<br> т.к. подключенный класс .normal_strong имеет ту же специфичность<br> селектора, что и класс .bold_font, в нем также присутствует<br> модификатор !important, но зато он расположен во внутренней<br> таблице стилей, которая имеет приоритет над внешней таблицей. </p> </div> </body> </html>
/* Специфичность селектора ниже, */ /* + это внешняя таблица стилей */ /* но присутствует !important */ .bold_font{ font-weight: bold !important; }
Пример №2