Правило !important
в CSS используется для придания свойству/значению большей важности, чем обычно.
Фактически, если вы используете правило !important
, оно переопределит ВСЕ предыдущие правила оформления для этого конкретное свойство этого элемента!
Давайте посмотрим на пример:
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
<p class="myclass">This is some text in a paragraph.</p>
<p id="myid">This is some text in a paragraph.</p>
</body>
</html>
В примере выше. все три абзаца получат красный цвет фона, хотя селектор идентификатора и селектор класса имеют более высокую специфичность. Правило !important
переопределяет свойство background-color
в обоих случаях.
Единственный способ переопределить !important
Правило состоит в том, чтобы включить еще один !important
правило об объявлении с такой же (или более высокой) специфичностью в исходном коде — и тут начинается проблема! Это делает код CSS запутанным, и отладка будет затруднена, особенно если у вас есть большая таблица стилей!
Здесь мы создали простой пример. Не очень понятно, если посмотреть исходный код CSS, какой цвет считается наиболее важным:
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
<p class="myclass">This is some text in a paragraph.</p>
<p id="myid">This is some text in a paragraph.</p>
</body>
</html>
Совет. Полезно знать о !important
правило. Вы можете увидеть это в исходном коде CSS. Однако не используйте его без крайней необходимости.
Один из способов использования !important
— если вам нужно переопределить стиль, который нельзя переопределить каким-либо другим способом. Это может быть, если вы работаете в системе управления контентом (CMS) и не можете редактировать код CSS. Затем вы можете установить некоторые собственные стили, чтобы переопределить некоторые стили CMS.
Другой способ использования !important
: предположим, что вы хотите, чтобы все кнопки на странице выглядели по-особенному. Здесь кнопки оформлены серым цветом. цвет фона, белый текст, а также некоторые отступы и границы:
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>
<p>Standard button: <a class="button" href="/html/">HTML Tutorial</a></p>
</body>
</html>
Внешний вид кнопки иногда может измениться, если мы поместим ее внутри другого элемента с помощью более высокая специфичность, и свойства вступают в конфликт. Вот пример этого:
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>
<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorial</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">HTML Tutorial</a></p>
</div>
</body>
</html>
Чтобы «заставить» все кнопки иметь одинаковый вид, несмотря ни на что, мы можем добавить !important
правило для свойств кнопки, например:
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>
<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorial</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">HTML Tutorial</a></p>
</div>
</body>
</html>