Специфичность — это механизм, который браузеры используют для определения того, какой стиль применять к элементу, если несколько правил совпадают. Понимание специфичности — ключевая часть работы с CSS и поможет избежать множества проблем с перекрытием стилей.

Как работает специфичность?

Специфичность рассчитывается как набор чисел, и обычно представляется в виде четырех частей: (a, b, c, d), где:

a — количество селекторов !important
b — количество селекторов в инлайновом стиле (например, style="...")
c — количество селекторов ID
d — количество селекторов классов, атрибутов и псевдоклассов
e — количество элементов и псевдоэлементов

Чем выше число в одной из частей, тем выше его специфичность. Если части равны, сравниваются последующие.

Примеры

Рассмотрим несколько примеров:

/* Пример 1: элемент */
div {
    color: blue; /* (0, 0, 0, 1) */
}

/* Пример 2: класс */
.container {
    color: red; /* (0, 0, 1, 0) */
}

/* Пример 3: ID */
#main {
    color: green; /* (0, 0, 1, 0) */
}

/* Пример 4: инлайновый стиль */
<
p style

=
"color: purple;"
> Hello

<
/
p >

/* (1, 0, 0, 0) */

Теперь определим специфичность для некоторых комбинаций:

p { color: black; } — специфичность (0, 0, 0, 1)
.text { color: yellow; } — специфичность (0, 0, 1, 0)
#header .text { color: pink; } — специфичность (0, 0, 1, 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) */
        }

        /* Условие для класса */
        .highlight {
            color: red; /* Специфичность (0, 0, 1, 0) */
        }

        /* Условие для ID */
        #main {
            color: green; /* Специфичность (0, 0, 1, 0) */
        }
    </style>
</head>
<body>
<p>Текст без стиля</p>
<p class="highlight">Текст с классом</p>
<p id="main">Текст с ID</p>
</body>
</html>

Выводы

В данном примере:

Тексты без класса и ID будут черными.
Текст с классом highlight будет красным, так как у него специфичность выше, чем у обычного параграфа.
Текст с ID main будет зеленым, поскольку ID имеет более высокую специфичность, чем класс.

Используя эти принципы специфичности, вы сможете лучше управлять стилями в ваших проектах и избегать конфликтов между CSS-правилами.

Предыдущий вопрос

Как браузер определяет, какие элементы соответствуют селектору CSS?

Следующий вопрос

Основные селекторы в CSS?

Содержание:

Как работает специфичность?

Примеры

Выводы

Редактировать