.alert { color: #166534 !important; }\n.alert { color: #b91c1c; }Первое объявление остаётся победителем, хотя красное правило расположено позже.
УРОК 20 ИЗ 100
Контролируемое использование !important
Сделайте одно объявление важным и проследите его влияние на каскад.
ШАГ 1 · ИЗУЧИТЕ
Как это работает
В одном происхождении объявление с !important имеет приоритет над обычными объявлениями. Его следует использовать редко, поскольку оно меняет обычный порядок каскада.
.alert { color: #166534; }\n.alert { color: #b91c1c; }Без !important специфичность одинакова, и побеждает последний красный цвет.
ШАГ 2 · ПРИМЕНИТЕ
Ваше задание
Добавьте !important только зелёному объявлению в первом правиле .alert.
index.htmlCSS
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ
Что должно пройти
0%не проверено
- ○Первый цвет помечен !important.
- ○Обычное красное правило остаётся после неё.
- ○Важное объявление расположено перед обычным правилом.
Объясните логику решения
Проверка учитывает значение и приоритет important. В реальных проектах сначала предпочитайте понятные селекторы и слои.