Спросят с вероятностью 7%
Приоритет селекторов (также известный как специфичность селекторов) определяет, какие стили будут применяться к элементу, если на него действуют несколько правил с различными селекторами. Специфичность основана на типах селекторов и их количественном присутствии в одном CSS-правиле.
Как она вычисляется?
Специфичность выражается четырьмя уровнями: A, B, C, D. Чем выше значения, тем более специфичный селектор.
✅A: Инлайновые стили (например,
style="color: red;") имеют самую высокую специфичность.✅B: Количество ID-селекторов в селекторе (например,
#header).✅C: Количество классов, атрибутов и псевдоклассов (например,
.class, [type="text"], :hover).✅D: Количество тегов и псевдоэлементов (например,
div, h1, ::before).Рассмотрим несколько примеров и определим их специфичность:
1️⃣
#main-content — (0, 1, 0, 0)2️⃣
.article p — (0, 0, 1, 1)3️⃣
header h1 span — (0, 0, 0, 3)4️⃣
div#main .content .text — (0, 1, 2, 1)Чем выше значения специфичности, тем выше приоритет стиля. Если два селектора имеют одинаковую специфичность, то стиль, который объявлен позже, будет применён.
Пример
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример специфичности</title>
<style>
p {
color: black; /* (0, 0, 0, 1) */
}
.text {
color: blue; /* (0, 0, 1, 0) */
}
#highlight {
color: red; /* (0, 1, 0, 0) */
}
p#highlight {
color: green; /* (0, 1, 0, 1) */
}
</style>
</head>
<body>
<p class="text" id="highlight">Этот текст будет зелёным.</p>
</body>
</html>
В этом примере на
<p> элемент действует несколько селекторов с разной специфичностью:1️⃣
p имеет специфичность (0, 0, 0, 1)2️⃣
.text имеет специфичность (0, 0, 1, 0)3️⃣
#highlight имеет специфичность (0, 1, 0, 0)4️⃣
p#highlight имеет специфичность (0, 1, 0, 1)Поскольку
p#highlight имеет наивысшую специфичность (0, 1, 0, 1), он применяет стиль цвета зелёный.Почему это важно?
✅Управление конфликтами стилей: Знание специфичности помогает правильно управлять стилями и избегать конфликтов.
✅Чтение и поддержка кода: Более специфичные селекторы позволяют писать CSS, который легко поддерживать и расширять.
✅Эффективность разработки: Понимание специфичности позволяет создавать более предсказуемый и стабильный код.
Специфичность селекторов определяет, какие CSS-стили будут применяться к элементу. Специфичность основывается на типах селекторов и их количестве. Чем более специфичный селектор, тем выше его приоритет.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых