Расчёт специфичности: встроенный стиль, ID, класс, элемент
Рассчитывайте показатели специфичности и определяйте, какое правило победит в любом конфликте стилей.
«Расчёт специфичности: встроенный стиль, ID, класс, элемент» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Что такое специфичность
Специфичность определяет, какое правило CSS выигрывает, когда несколько правил применяются к одному элементу и свойству. Она вычисляется как оценка из четырёх частей: (A, B, C, D), где A имеет наивысший, а D — наименьший приоритет.
Компоненты специфичности
Четыре столбца:
- A: встроенные стили (атрибут style="") = 1,0,0,0
- B: селекторы ID (#id) = 0,1,0,0
- C: селекторы классов (.class), селекторы атрибутов, псевдоклассы = 0,0,1,0
- D: селекторы типов (элементов), псевдоэлементы = 0,0,0,1
Примеры специфичности
Вычисление специфичности:
<p>Plain paragraph — matches <code>p</code></p>
<p class="card">Card paragraph — matches <code>.card</code></p>
<div id="header">
Header block — matches <code>#header</code>
<span class="logo">Logo — matches <code>#header .logo</code></span>
</div>
<p class="intro">Intro paragraph — matches <code>p.intro</code></p>
<nav class="nav">
<a href="#" class="nav-link active">Active link — matches <code>.nav .nav-link.active</code></a>
</nav>Универсальный селектор не имеет специфичности
Универсальный селектор *, комбинаторы (+, >, ~, пробел) и псевдокласс :where() добавляют к специфичности нулевое значение (0,0,0,0).
Встроенные стили имеют приоритет
Встроенные стили (атрибут style="") имеют наивысшую специфичность (1,0,0,0). Переопределить их из правила таблицы стилей может только !important.
Сравнение оценок специфичности
Сравнивайте значения слева направо. Первый столбец с различающимися оценками определяет победителя. (0,1,0,0) превосходит (0,0,99,99), поскольку столбец ID сразу имеет приоритет.
Специфичность :is(), :not() и :has()
:is(), :not() и :has() получают специфичность своего наиболее специфичного аргумента:
<div id="header">:is(#header, .nav) match via ID</div>
<nav class="nav">:is(#header, .nav) match via class</nav>
<button class="active">Active button (excluded from :not(.active))</button>
<button>Plain button (matches :not(.active))</button>
<p class="p">:where(.p) paragraph</p>Специфичность nth-child
:nth-child(), :first-child, :hover и другие псевдоклассы добавляют (0,0,1,0) — специфичность уровня класса.
Специфичность псевдоэлементов
::before, ::after, ::first-line и т. д. добавляют (0,0,0,1) — специфичность уровня элемента. Они находятся в столбце D.
Специфичность — это не наследование
Специфичность вычисляется отдельно для каждого свойства и элемента. Для конкретного свойства выигрывает правило с более высокой специфичностью, но унаследованные значения от родителя с высокой специфичностью не превосходят более специфичные прямые правила дочернего элемента.
Инструменты для вычисления специфичности
Используйте онлайн-инструменты, например specificity.keegan.st, или DevTools браузера для проверки специфичности. В DevTools перечёркнутые стили на панели стилей означают, что победило более специфичное правило.
Быстрая проверка
У какого селектора специфичность выше: #sidebar .link или .nav .nav-item .nav-link.active?
Итоги
Оценки специфичности имеют вид (A, B, C, D): встроенные стили, ID, классы/атрибуты/псевдоклассы, элементы/псевдоэлементы. Сравнивайте их слева направо — побеждает первый различающийся столбец. :where() всегда добавляет нулевое значение. Один ID превосходит любое количество селекторов классов. Используйте панель стилей DevTools, чтобы увидеть, какие правила выигрывают и почему.
Часто задаваемые вопросы
Урок «Расчёт специфичности: встроенный стиль, ID, класс, элемент» бесплатный?
Да — полный текст урока «Расчёт специфичности: встроенный стиль, ID, класс, элемент» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Расчёт специфичности: встроенный стиль, ID, класс, элемент»?
Рассчитывайте показатели специфичности и определяйте, какое правило победит в любом конфликте стилей. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Расчёт специфичности: встроенный стиль, ID, класс, элемент»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Расчёт специфичности: встроенный стиль, ID, класс, элемент
- Каскад: источник и порядок
- !important: когда и почему не следует использовать
- Наследование и свойство all