Специфичность селекторов: расчёт веса и влияние на стиль

Что такое специфичность и зачем она нужна?

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

/* Пример конфликта */
.button { color: blue; }       /* Селектор класса */
#submit { color: red; }       /* Селектор ID */

В этом случае текст кнопки станет красным, потому что ID «тяжелее» класса. Но как именно работает этот расчёт? Давайте разберёмся!

Как рассчитывается вес селекторов?

Специфичность можно представить в виде четырёхзначного числа: 0,0,0,0. Каждая позиция соответствует определённому типу селектора:

1. Тысячи (inline-стили): 1,0,0,0

<p style="color: purple;">Текст</p> <!-- Самый высокий приоритет! -->

2. Сотни (ID): 0,1,0,0

#header { ... } /* Вес: 0,1,0,0 */

3. Десятки (классы, атрибуты, псевдоклассы): 0,0,1,0

.menu, [type="text"], :hover { ... } /* Каждый добавляет 0,0,1,0 */

4. Единицы (элементы, псевдоэлементы): 0,0,0,1

div, ::before { ... } /* Каждый добавляет 0,0,0,1 */

💡 Важно! Универсальный селектор (*) и комбинаторы (+, ~, >) не влияют на специфичность. Их вес — 0,0,0,0.

Практические примеры расчёта

Давайте посчитаем вес для нескольких селекторов:

#nav .item.active { ... }  /* 0,1,2,0: 1 ID + 2 класса */
div#header h1.title { ... } /* 0,1,1,2: 1 ID + 1 класс + 2 элемента */

Таблица сравнения:

Что перевешивает: важные исключения

1. !important — это «атомная бомба» 💥 в мире CSS. Перекрывает все остальные стили, даже inline.

.warning { color: red !important; } /* Теперь red применится в любом случае */

⚠️ Совет Данилы Бежина: Используйте !important только в крайних случаях (например, переопределяя стили библиотек). Иначе ваш CSS превратится в минное поле!

2. Порядок в коде: Если специфичность одинакова, «побеждает» последний объявленный селектор.

p { color: blue; }
p { color: green; } /* Применяется green */

Как отлаживать специфичность?

1. Инструменты разработчика: В Chrome/Firefox наведите на свойство CSS — увидите вес селектора.

2. Правило «чем меньше, тем лучше»:

• Избегайте длинных цепочек селекторов (div div ul li a).
• Используйте классы вместо вложенности.

/* Плохо */
.sidebar ul li a.active { ... } /* Вес: 0,0,1,3 */

/* Хорошо */
.sidebar-link.active { ... } /* Вес: 0,0,2,0 */

Тренируемся на примере!

Задача: Какой цвет будет у кнопки? 🎨

<button id="action-btn" class="btn primary">Клик!</button>

.btn { background: blue; }          /* 0,0,1,0 */
button#action-btn { background: red; } /* 0,1,0,1 */
#action-btn { background: green; }   /* 0,1,0,0 */
.primary { background: yellow; }    /* 0,0,1,0 */