Расскажи о специфичности CSS-селекторов: какие приоритеты и перекрытия свойств бывают?

Специфичность сравнивает селекторы по ID, затем классам/атрибутам/псевдоклассам и затем тегам/псевдоэлементам. Но сначала учитывается более широкий каскад.

Короткий ответ

Что ответить на собеседовании

Специфичность сравнивает селекторы по ID, затем классам/атрибутам/псевдоклассам и затем тегам/псевдоэлементам. Но сначала учитывается более широкий каскад.

Подробный разбор

Ответ с пояснениями

Специфичность сравнивает селекторы по ID, затем классам/атрибутам/псевдоклассам и затем тегам/псевдоэлементам. Но сначала учитывается более широкий каскад.

На результат влияют происхождение стиля, important и слои каскада; высокая специфичность не перебивает любое правило автоматически. При равной специфичности в сопоставимых условиях выигрывает более позднее правило. :where имеет нулевую специфичность, а :is/:not/:has используют вес аргументов. Наследованное значение уступает явно заданному на элементе.

ИИ-помощник для собеседований

Хочешь уверенно проходить собеседования?

Попробуй ИИ-помощник для собеседований: слышит вас и собеседника, анализирует экран, подсказывает ответы в реальном времени, работает без VPN и не попадает в захват экрана.

Подробнее