Перебить стиль без !important
Условие
Кнопка должна стать синей. Правило .btn { color: red } уже есть и его менять нельзя. Добавь своё правило так, чтобы оно победило по специфичности. !important использовать нельзя, инлайн-стили тоже.
Что проверяют тесты
кнопка синяя
без !important
исходное правило не тронуто
Как подойти
Задача про подсчёт специфичности вместо эскалации !important. Один класс даёт 0-1-0, добавление предка и атрибута - 0-3-0, идентификатор сразу 1-0-0. Понимание, что атрибутный селектор и псевдокласс весят как класс, а псевдоэлемент как тег, закрывает почти все споры о том, почему стиль не применился. !important в продакшене - почти всегда признак того, что специфичность вышла из-под контроля, и следующий разработчик ответит вторым !important.
Подсказки: 3
- Специфичность считается тройкой: идентификаторы, классы и атрибуты, элементы.
- Атрибутный селектор весит столько же, сколько класс.
- При равной специфичности побеждает то правило, что ниже.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.