Декларация CSS !important

Декларация CSS !important отвечает за приоритет в стилях в случае спорных моментах. Если мы указали эту декларацию, то мы подчеркиваем то, что это свойство является главным.

Синтаксис CSS !important предполагает простое написание этой декларации в конце определяни свойства CSS. Его можно применять к конкретным свойствам CSS. Например

...
text-align: center !important;
font-size: 14px !important;
font-weight: bold !important;
...

В целом !important не получил широкого распространения и используется редко.

Когда стоит использовать !important

Если пользователь подключил в своем браузере свою собственную таблицу стилей, то в этом случае может возникнут несколько спорных конфликтов, а какой стиль будет использован.

Рассмотрим все варианты. Сделаем уточнение, что авторский стиль – это стили используемые на сайте.

  • Если !important есть в авторском стиле, то будет применяться стиль автора
  • Если !important есть в пользовательском стиле, то будет применяться стиль пользователя
  • Если !important отсутствует в авторском и пользовательском стиле, то будет применяться стиль автора
  • Если !important есть в авторском и пользовательском стиле, то будет применяться стиль пользователя





Примеры с !important

Сначала приведем пример без использования !important

<html>
<head>
<style>
span{
color: black;
}
div.primer1 span{
color: blue;
}
</style>
</head>
<body>
<div class="primer1">Черный текст. <span>Синий текст</span</div>
</body>
</html>

На странице преобразуется в следующее

Черный текст. Синий текст

Теперь добавим к общему описанию span декларацию !important. Теперь простое объявление span пересилит свойство div.primer1 span. Поэтому фраза “синий текст” будет иметь черный цвет.

<html>
<head>
<style>
span{
color: black !important;
}
div.primer1 span{
color: blue;
}
</style>
</head>
<body>
<div class="primer1">Черный текст. <span>Синий текст</span</div>
</body>
</html>

На странице преобразуется в следующее

Черный текст. Синий текст



Читайте также:

• Линейный градиент

• Радиальный градиент

• z-index

• word-wrap

• Граница у элементов через бордер

• Свойство background

• Свойство transition

• Как скруглить углы

• CSS position: fixed


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.