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