Выбор ответа Middle Селекторы и специфичность обновлено
Каскадные слои и специфичность
Вопрос
Какой padding получит <button id="buy" class="btn p-0">?
@layer components, utilities;
@layer components {
#buy.btn { padding: 12px 24px; }
}
@layer utilities {
.p-0 { padding: 0; }
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: 0: слой utilities объявлен позже и побеждает id. Слои сравниваются в каскаде раньше специфичности.
Варианты ответа
0: слойutilitiesобъявлен позже и побеждает idправильный ответ12px 24px: у#buy.btnспецифичность выше, чем у.p-012px 24px: слойcomponentsобъявлен первым и потому важнее- Зависит от порядка классов
btnиp-0в атрибутеclass
Разбор
Слои сравниваются в каскаде раньше специфичности. Порядок задан строкой @layer components, utilities;, и более поздний utilities сильнее, поэтому .p-0 побеждает даже id. Специфичность сравнивалась бы только внутри одного слоя. Первый слой, наоборот, самый слабый (для обычных объявлений). Порядок классов в атрибуте на каскад не влияет никогда.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.