Специфичность и каскад
Вопрос
Как браузер выбирает, какое правило применить?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
порядок: важность, происхождение, специфичность, порядок в файле
специфичность считается тройкой: id, класс/атрибут/псевдокласс, тег
инлайновый стиль выше любого селектора
important ломает каскад и почти всегда признак проблемы
у слоёв каскада и :where специфичность нулевая
наследуемые свойства применяются только при отсутствии своих
Что могут спросить следом
- Как победить чужой стиль без important
- Что делает :where и чем отличается от :is
- Зачем нужны каскадные слои
Разбор
Порядок разрешения: сначала важность (!important), потом происхождение
(автор, пользователь, браузер), потом специфичность, и только при равенстве - порядок
в исходнике.
Специфичность - тройка: количество id, количество классов/атрибутов/псевдоклассов,
количество тегов. #a .b span = (1,1,1) и побеждает .b .c .d = (0,3,0) - счёт идёт
по разрядам, а не суммой.
Инлайновый style выше любого селектора, !important выше всего и ломает каскад -
поэтому в общем коде он признак того, что где-то раньше перестарались со специфичностью.
Современные инструменты: :where() обнуляет специфичность своего содержимого,
а @layer задаёт порядок слоёв явно - это правильный способ побеждать чужие стили
без гонки вооружений.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.