CSS !важное свойство


Оглавление

    Показать оглавление


Что важно?

Правило !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 Правило состоит в том, чтобы включить еще один !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

Один из способов использования !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>