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>

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

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

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