Приоритет селекторов (также известный как специфичность селекторов) определяет, какие стили будут применяться к элементу, если на него действуют несколько правил с различными селекторами. Специфичность основана на типах селекторов и их количественном присутствии в одном 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, который легко поддерживать и расширять.
- Эффективность разработки: Понимание специфичности позволяет создавать более предсказуемый и стабильный код.
👉 @frontendInterview
