Как CSS специфичность работает в браузере

Многие считают CSS сложным. Они придумывают разные оправдания: не хватает способностей понимать CSS или CSS сам по себе плох. Но реальность такова, что люди просто не нашли время, чтобы действительно изучить его. Если вы читаете эту статью, значит заинтересованы в изучении CSS и это здорово!

Что такое CSS специфичность?

Вы когда-нибудь писали стиль, а он не работает, потом вы добавляете !important (или нет), и все же он не работает? Затем вы смотрите на Devtools и понимаете, что другой стиль где-то перекрывает ваш?

В этом и заключается специфичность CSS! Именно так браузер выбирает, какой из конкурирующих селекторов применить к элементу. Когда браузер видит, что два или более селектора совпадают с одним и тем же элементом, и у селекторов есть конфликтующие правила, ему нужен способ выяснить, какое из правил применить к этому элементу. То, как это происходит, называется значение специфичности CSS.

Прежде чем мы углубимся в CSS специфичность, запомните эти вещи:

1. Специфичность CSS важна только тогда, когда несколько селекторов влияют на один и тот же элемент. Браузеру нужен способ выяснить, какой стиль применять к соответствующему элементу, когда существуют противоречивые значения свойств.
2. Когда два или более совпадающих селектора имеют одно и то же значение (вес) специфичности, браузер выбирает самый последний совпадающий селектор, который появляется ближе к нижней части списка совпадающих селекторов. Следующий пункт объясняет, что такое список подходящих селекторов.
3. Браузер формирует список подходящих селекторов, комбинируя все стили на веб-странице и отфильтровывая те, которые не соответствуют элементу currently-being-styled. Первые селекторы в таблице стилей находятся вверху списка, а последние селекторы - внизу.
4. Свойство style для элемента имеет большее значение специфичности, чем селекторы в таблицах стилей, за исключением случаев, когда есть !importantв селекторе таблиц стилей.
5. Использование !important (что в некоторых случаях считается плохой практикой) изменяет специфичность селектора. Когда два селектора имеют одинаковую специфичность, выигрывает селектор с !important. И когда они оба имеют !important, самый последний селектор выигрывает.

Значение специфичности

Теперь мы можем перейти к тому, как браузер определяет значения специфичности селектора.

Специфичность селектора может быть представлена в виде трехзначной строки, разделенной дефисом (или чем угодно): 2–4–1. Первая цифра - это количество присутствующих селекторов ID, вторая - это количество селекторов классов, селекторов атрибутов и псевдоклассов, а третья - количество имеющихся селекторов типов и псевдоэлементов. Например:

#red.blue // 1-1-0

#green // 1-0-0

div.yellow#red // 1-1-1

.red.blue.yellow // 0-3-0

Определение самого “специфичного”

Чтобы определить, какой селектор обладает большей специфичностью, вы можете сравнить каждое из трех значений.

Скажем, у вас есть 1-1-1 и 0-3-0, как в двух последних примерах, и вам нужно определить, какой из них имеет большую специфичность. Сначала вы сравниваете последние значения 1 и 0, и в этом случае выигрывает 1. Это означает, что на данный момент div.yellow#red имеет большее значение специфичности ... но мы еще не закончили сравнение значений.

Далее сравниваем значения 1 и 3, 3 выигрывает. На данный момент .red.blue.yellow имеет большее значение специфичности.

Наконец, сравниваем первые значения, 1 и 0, и выигрывает 1, так чтоdiv.yellow#red обладает большей специфичностью, чем .red.blue.yellow.

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

Небольшие предупреждения

3 “подводных камня”, о которых нужно знать:

1. Выше я писал, что второе число в последовательности чисел, состоящей из трех, представляет собой число селекторов классов, селекторов атрибутов и псевдоклассов. Это верно во всех случаях, кроме случаев, когда это: :not() псевдокласс. Когда это :not() псевдокласс, мы не считаем его, а просто игнорируем. Но селекторы внутри него не игнорируются, они считаются нормально.
2. CSS специфичность понимает “форму” селектора. Это означает, что когда у вас есть *[id="yellow"] и #yellow, первый рассматривается как селектор атрибутов.
3. Универсальный селектор * сам по себе не засчитывается в значение специфичности селектора. В пункте выше [id="yellow"] часть селектора - это то, что на самом деле имеет значение.

Заключение

Надеюсь, что эта статья проста для понимания и помогла разобраться, что такое CSS специфичность. Теперь вы можете посмотреть на стиль и с легкостью определить, насколько он специфичен.

Перевод How CSS specificity works in the browser от Digital Skynet