CSS селекторы: специфичность

Ниже приводится выдержка из нашей книги CSS Master , написанной Тиффани Б. Браун. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .

Думайте о специфичности как о балле или ранге, который определяет, какие объявления стилей в конечном итоге применяются к элементу. Универсальный селектор ( * ) имеет низкую специфичность. Селекторы ID очень специфичны. Селекторы потомков, такие как p img и дочерние селекторы, такие как .panel > h2 , более специфичны, чем селекторы типа, такие как p , img или h1 .

Вычисление точных значений специфичности поначалу кажется сложным. Как объяснено в Селекторах Уровня 3, вам необходимо:

Эти значения A, B и C затем объединяются, чтобы сформировать окончательное значение специфичности. Селектор идентификатора, такой как #foo имеет специфичность 1,0,0. Селекторы атрибутов, такие как [type=email] и селекторы классов, такие как .chart имеют специфичность 0,1,0. Добавление псевдокласса, такого как :first-child (например, .chart:first-child ), дает нам специфичность 0,2,0. Но использование простого селектора типа или элемента, такого как h1 или p дает нам специфичность только 0,0,1.

Сложные и комбинаторные селекторы, конечно, дают нам более высокие значения специфичности. Давайте посмотрим на пример. Рассмотрим следующий CSS:

 ul#story-list > .book-review { color: #0c0; } #story-list > .book-review { color: #f60; } 

Эти два набора правил похожи, но они не одинаковы. Первый селектор ul#story-list > .bookreview содержит селектор типа ( ul ), селектор идентификатора ( #story-list ) и селектор класса ( .bookreview ). Имеет значение специфичности 1,1,1. Второй селектор, #story-list > .book-review содержит только идентификатор и селектор классов. Его специфичность составляет 1,1,0. Даже если наше правило ul#story-list > .bookreview #story-list > .book-review успешно выполнено ul#story-list > .bookreview , более высокая специфичность первого означает, что элементы с классом .book-review будут зелеными, а не оранжевыми.

Псевдоклассы, такие как :link или :invalid имеют тот же уровень специфичности, что и селекторы классов. Как a:link и a.external имеют значение специфичности 0,1,1. Аналогично, псевдоэлементы, такие как ::before и ::after , так же специфичны, как селекторы типа или элемента. В случаях, когда два селектора одинаково специфичны, включается каскад. Вот пример:

 a:link { color: #369; } a.external { color: #f60; } 

Если бы мы применили этот CSS, каждая ссылка была бы синей, за исключением тех, для которых применен class="external" . Эти ссылки будут оранжевыми.

Поддержание низкой специфичности помогает предотвратить ползучесть селектора или тенденцию к увеличению специфичности и длины селектора с течением времени. Это часто происходит, когда вы добавляете в команду новых разработчиков или новые формы контента на веб-сайт. Селекторный сползание также способствует длительной головной боли при обслуживании. Вы либо используете более специфические селекторы для переопределения других наборов правил, либо вам необходимо реорганизовать ваш код. Более длинные селекторы также увеличивают вес ваших CSS-файлов.

Мы обсуждаем стратегии сохранения специфичности на низком уровне в главе 2.

Вывод

Прочитав эту главу, вы должны хорошо понимать селекторы CSS. В частности, теперь вы должны знать, как:

В следующей главе мы рассмотрим некоторые золотые правила написания поддерживаемого, масштабируемого CSS.