Важность

Иногда важность объявления настолько велика, что перевешивает все остальные факторы. CSS2.1 называет их (по вполне понятным причинам) важными объявлениями (important declarations) и предоставляет вам возможность отмечать их путем введения в объявление ключевого слова !important прямо перед завершающей точкой с запятой:

p.dark {color: #333 !important; background: white;}

Здесь значение цвета #333 отмечено как !important, тогда как цвет фона white – нет. Если вы хотите сделать важными оба объявления, каждому из них понадобится собственный маркер !important:

p.dark {color: #333 !important; background: white !important;}

Необходимо правильно размещать !important, иначе объявление будет признано недействительным. Ключевое слово !important всегда располагается в конце объявления, прямо перед точкой с запятой. Это особенно важно, когда дело доходит до свойств (например, font), значения которых могут состоять из нескольких ключевых слов:

p.light {color: yellow; font: smaller Times, serif !important;}

Если бы !important было расположено где-либо в другом месте объявления font, то все объявление было бы признано недействительным и ни один из его стилей не был бы применен.


Объявления, отмеченные как !important, не имеют особого значения специфичности, они рассматриваются отдельно от остальных. Фактически все объявления !important группируются вместе, и тогда уже их конфликты специфичностей разрешаются относительно друг друга. Аналогично группируются все остальные объявления, и конфликты свойств разрешаются с помощью специфичностей. В любом случае, когда имеет место конфликт важного и неважного объявления, всегда побеждает важное.
Применения следующих правил и фрагмента разметки:

h1 {font-style: italic; color: gray !important;}
.title {color: black; background: silver;}
* {background: black !important;}

NightWing



Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Каскад
Наследование
Объявления и специфичность
Сортировка по порядку расположения
Сортировка по приоритетности и источнику

Вернуться в раздел: CSS / 3. Структура и каскад