От автора: представьте специфичность в виде оценки или степени, которая решает, какие стили применить к элементу. Универсальный селектор (*) имеет низкую специфичность. Селектор id – высокую. Родительские селекторы типа p img и дочерние селекторы типа .panel > h2 имеют более высокую специфичность, чем типовые селекторы p, img и h1.
По началу, кажется, сложно вычислить точное значение специфичности. В спецификации Selectors Level 3 говорится, что для этого вам необходимо:
подсчитать количество id селекторов в селекторе (=А);
подсчитать количество классов, селекторов атрибутов и псевдоклассов в селекторе (=В);
подсчитать количество типовых селекторов и псевдоэлементов в селекторе (=С);
проигнорировать универсальный селектор.
Значения А, В и С вместе дают конечное значение специфичности. ID селектор типа #foo имеет специфичность 1,0,0. Селекторы атрибутов типа [type=email] и классы типа .chart имеют специфичность 0,1,0. Если добавить псевдокласс типа :first-child (например, .chart:first-child), специфичность станет 0,2,0. А простые типовые или элементные селекторы типа h1 и p дают всего лишь 0,0,1.
Заметка: вычисление специфичности
Выучить и вычислить специфичность селектора можно с помощью ресурсов Specificity Calculator от Keegan Street и CSS Explain от Joshua Peek.
Сложные селекторы и комбинаторы дают, естественно, большую специфичность. Разберем пример CSS:
|
1 2 3 4 5 6 7 |
ul#story-list > .book-review { color: #0c0; } #story-list > .book-review { color: #f60; } |
Эти правила похожи, но не одинаковы. В первом селекторе ul#story-list > .bookreview находится типовой селектор (ul), ID селектор (#story-list) и класс (.bookreview). Специфичность равна 1,1,1. Во втором селекторе #story-list > .book-review хранятся только ID и класс. Специфичность равна 1,1,0. Несмотря на то, что #story-list > .book-review объявлен ниже ul#story-list > .bookreview, высокая специфичность последнего заставить элементы с классом .book-review окраситься в зеленый, а не оранжевый цвет.
Псевдоклассы :link и :invalid имеют ту же специфичность, что и классы. У a:link и a.external будет одна специфичность, равная 0,1,1. Точно так же псевдоэлементы типа ::before и ::after имеют одинаковую специфичность с типовыми и элементными селекторами. Если два селектора имеют одинаковую специфичность, в дело вступает каскадирование. Пример:
|
1 2 3 4 5 6 |
a:link { color: #369; } a.external { color: #f60; } |
Если применить CSS код выше, то все ссылки станут синевато-серыми кроме тех, у которых есть class=»external». Такие ссылки будут иметь оранжевый цвет.
Поддержание низкой специфичность помогает не допустить ползучести селекторов или тенденции постоянного роста специфичности. Такое часто происходит, когда в команде появляются новые разработчики, или когда на сайт добавляются новые формы контента. Ползучесть селекторов также прибавляет головной боли с долгосрочным обслуживанием. Вы либо будете использовать все более специфичные селекторы, чтобы переписывать правила, либо вам придется рефакторить код. Длинные селекторы увеличивают вес CSS файлов.
В главе 2 мы обсудим, как поддерживать низкую специфичность.
Заключение
После прочтения этой главы у вас должно сложиться четкое понимание CSS селекторов. В частности вы должны знать:
как использовать селекторы и применять стили к конкретным элементам, псевдоэлементам и псевдоклассам;
понимать различия между псевдоэлементами и псевдоклассами;
использовать новые псевдоклассы, представленные в спецификациях Selectors Level 3 и 4;
вычислять специфичность.
В следующей главе мы расскажем про золотые правила написания обслуживаемого и масштабируемого CSS кода.
Автор: Tiffany Brown
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
