Спросят с вероятностью 10%
Специфичность селекторов — это механизм, по которому браузер определяет, какие CSS-правила применять к элементу, в случае конфликта между несколькими правилами. Специфичность определяется на основе вида селектора и его вложенности. Это ключевой аспект для понимания того, как CSS применяется к HTML-документу и как разрешаются конфликты стилей.
Как рассчитывается специфичность:
Специфичность рассчитывается по четырём компонентам (A, B, C, D), которые можно представить в виде чисел в четырёхколоночном значении:
✅ А: Если стиль прописан в атрибуте
style у элемента, то A = 1 (инлайновые стили).✅ B: Количество ID селекторов в правиле.
✅ C: Количество классов, селекторов атрибутов и псевдоклассов в правиле.
✅ D: Количество типов элементов и псевдоэлементов в правиле.
При этом важно понимать, что селектор с более высоким уровнем специфичности переопределит селектор с более низким уровнем специфичности, независимо от порядка их объявления.
Примеры:
1️⃣ Инлайновый стиль (A=1, B=0, C=0, D=0): Наивысшая специфичность.
<div style="color: red;"></div>
2️⃣ ID селектор (A=0, B=1, C=0, D=0): Высокая специфичность.
#header { color: blue; }
3️⃣ Классы, селекторы атрибутов, псевдоклассы (A=0, B=0, C=1, D=0):
.button.active { color: green; }
4️⃣ Типы элементов и псевдоэлементы (A=0, B=0, C=0, D=1):
div::before { content: ">>"; }
Исключения и особые случаи:
✅ Универсальный селектор (
*), комбинаторы (например, +, >, ~) и отрицание (:not()) не влияют на специфичность.✅ Важность (
!important): Если к правилу применён !important, это правило переопределяет другие правила, независимо от специфичности (использовать с осторожностью).Понимание специфичности селекторов помогает избежать конфликтов стилей и делает код более предсказуемым и управляемым. Это основа для эффективной разработки стилей и помогает избежать излишнего использования
!important, что может усложнить дальнейшую поддержку кода.Специфичность — это важный инструмент для управления каскадом стилей и обеспечения того, чтобы правильные стили применялись к правильным элементам.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.
🔐 База собесов | 🔐 База тестовых