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