Что такое !important?
Правило !important в CSS используется для придания большей важности свойству/значению, чем обычно.
На самом деле, если вы используете !important, оно переопределит ВСЕ предыдущие правила оформления для этого конкретного свойства этого элемента!
Давайте посмотрим на пример:
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Объяснение примера !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. В некоторых случаях вы можете увидеть это в исходном коде.
Однако не используйте его без крайней необходимости.
Использование !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;
}