- PVSM.RU - https://www.pvsm.ru -
Многие считают CSS сложным. Они придумывают разные оправдания: не хватает способностей понимать CSS или CSS сам по себе плох. Но реальность такова, что люди просто не нашли время, чтобы действительно изучить его. Если вы читаете эту статью, значит заинтересованы в изучении CSS и это здорово!
Вы когда-нибудь писали стиль, а он не работает, потом вы добавляете !important (или нет), и все же он не работает? Затем вы смотрите на Devtools и понимаете, что другой стиль где-то перекрывает ваш?
В этом и заключается специфичность CSS! Именно так браузер выбирает, какой из конкурирующих селекторов применить к элементу. Когда браузер видит, что два или более селектора совпадают с одним и тем же элементом, и у селекторов есть конфликтующие правила, ему нужен способ выяснить, какое из правил применить к этому элементу. То, как это происходит, называется «значение специфичности CSS».
Прежде чем мы углубимся в CSS специфичность, запомните эти вещи:
Теперь мы можем перейти к тому, как браузер определяет значения специфичности селектора.
Специфичность селектора может быть представлена в виде трехзначной строки, разделенной дефисом (или чем угодно): «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 “подводных камня”, о которых нужно знать:
:not()
псевдокласс. Когда это :not()
псевдокласс, мы не считаем его, а просто игнорируем. Но селекторы внутри него не игнорируются, они считаются нормально.*[id="yellow"]
и #yellow
, первый рассматривается как селектор атрибутов.*
сам по себе не засчитывается в значение специфичности селектора. В пункте выше [id="yellow"]
часть селектора — это то, что на самом деле имеет значение.Надеюсь, что эта статья проста для понимания и помогла разобраться, что такое CSS специфичность. Теперь вы можете посмотреть на стиль и с легкостью определить, насколько он «специфичен».
Автор: Digital Skynet
Источник [1]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/css/305798
Ссылки в тексте:
[1] Источник: https://habr.com/ru/post/436610/?utm_source=habrahabr&utm_medium=rss&utm_campaign=436610
Нажмите здесь для печати.