Выбор ответа Junior Селекторы и специфичность спрашивают часто обновлено
Id против нескольких классов
Вопрос
Какого цвета будет ссылка?
<style>
#nav a { color: red; }
.menu .item .link.active { color: green; }
</style>
<nav id="nav" class="menu">
<span class="item"><a class="link active">Главная</a></span>
</nav>
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Красного: один id весит больше любого количества классов. Специфичность nav a равна (1, 0, 1), у второго селектора (0, 4, 0).
Варианты ответа
- Зелёного: у второго селектора 4 класса, это больше одного id
- Красного: один id весит больше любого количества классовправильный ответ
- Зелёного: второе правило ниже по коду
- Цвета по умолчанию: правила конфликтуют и оба отбрасываются
Разбор
Специфичность #nav a равна (1, 0, 1), у второго селектора (0, 4, 0). Сравнение идёт слева направо, и по первому разряду id выигрывает сразу. Классы не «переполняются» в id, сколько их ни добавляй. Порядок в коде учитывается только при равной специфичности. Конфликт всегда разрешается, ничего не отбрасывается.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.