CSS Правило !important
Что такое !important?
Правило !important в CSS используется для придания большей важности свойству / значению, чем обычно.
Фактически, если вы используете правило !important, оно переопределит ВСЕ предыдущие правила стилизации для этого конкретного свойства данного элемента!
Давайте посмотрим на пример:
Пример
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Объяснение примера
В приведенном выше примере все три параграфа получат красный цвет фона, хотя селектор идентификатора и селектор класса имеют более высокую специфичность. Правило !important переопределяет свойство background-color в обоих случаях.
О важности !important
Единственный способ переопределить правило !important - это включить другое правило !important в объявление с той же (или выше) специфичностью исходного кода - и тут начинается проблема! Это сбивает код CSS с толку, и отладка будет сложной, особенно если у вас большая таблица стилей!
Здесь мы создали простой пример. Когда вы смотрите на исходный код CSS, не очень понятно, какой цвет считается наиболее важным:
Пример
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
Совет: Полезно знать о правиле !important, вы можете увидеть его в некотором исходном коде CSS. Однако не используйте его, если в этом нет крайней необходимости.
Возможно одно или два справедливых использования !important
Один из способов использования !important - это переопределение стиля, который нельзя изменить никаким другим способом. Такое может быть, если вы работаете в системе управления контентом (CMS) и не можете редактировать код CSS. Затем вы можете установить несколько пользовательских стилей, чтобы переопределить некоторые стили CMS.
Другой способ использования !important : предположим, вам нужен особый вид для всех кнопок на странице. Здесь кнопки имеют серый цвет фона, белый текст и некоторые отступы и границы:
Пример
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
Внешний вид кнопки может иногда измениться, если мы поместим её в другой элемент с более высокой специфичностью, и свойства вступят в конфликт. Вот пример этого:
Пример
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
Чтобы "заставить" все кнопки выглядеть одинаково, несмотря ни на что, мы можем добавить правило !important к свойствам кнопки, например:
Пример
.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}
