Выбор ответа Senior Селекторы и специфичность обновлено
Стили вне слоёв против слоёв
Вопрос
Какого цвета будет <a class="link"> внутри <nav id="top">?
a { color: gray; }
@layer theme {
#top .link { color: purple; }
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Серого: обычные стили вне слоёв сильнее любого слоя. Для обычных (не !important) объявлений стили вне слоёв образуют неявный последний слой и побеждают все именованные слои.
Варианты ответа
- Фиолетового: у
#top .linkспецифичность намного выше - Фиолетового: правила в слоях всегда важнее обычных
- Цвет зависит от того, что идёт ниже по коду
- Серого: обычные стили вне слоёв сильнее любого слояправильный ответ
Разбор
Для обычных (не !important) объявлений стили вне слоёв образуют неявный последний слой и побеждают все именованные слои. Специфичность сравнивается только после слоёв, поэтому id внутри theme не помогает. Слои не важнее обычных правил, а наоборот. Порядок в коде проверяется последним и здесь до него не доходит.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.