Специфичность

Существует множество способов выбора необходимых элементов. Фактически один и тот же элемент может быть выбран двумя и более правилами, каждое из которых имеет собственный селектор. Рассмотрим следующие три пары правил. Предположим, что каждая пара будет сопоставляться с одним и тем же элементом:

h1 {color: red;}
body h1 {color: green;}
h2.grape {color: purple;}
h2 {color: silver;}
html > body table tr[id="totals"] td ul > li {color: maroon;}
li#answer {color: navy;}

Очевидно, что применено будет только одно из двух правил каждой пары, поскольку сопоставляемый элемент может быть только одного цвета. А как узнать, какое из правил одержит верх? Ответ кроется в специфичности (specificity) каждого селектора. Для каждого правила агент пользователя вычисляет специфичность селектора и прикрепляет ее к каждому объявлению правила. Если элемент имеет несколько конфликтующих объявлений свойства, выигрывает то, которое имеет наибольшую специфичность. Это еще не все, что касается разрешения конфликтов. На самом деле конфликты всех стилей разрешаются каскадом, которому в этой главе посвящен отдельный раздел.

Специфичность селектора определяется компонентами самого селектора.


Значение специфичности состоит из четырех частей: 0,0,0,0. Реальная специфичность селектора определяется следующим образом:
• Для каждого указанного в селекторе значения идентификатора к специфичности добавляется 0,1,0,0.
• Для каждого указанного в селекторе имени класса, псевдокласса или атрибута к специфичности добавляется 0,0,1,0.
• Для каждого заданного в селекторе элемента и псевдоэлемента к специфичности добавляется 0,0,0,1. Внутреннее противоречие CSS2 состояло в том, что не было определено, обладают ли псевдоэлементы какой-либо специфичностью, но в CSS2.1 их специфичность явно определена и учитывается данным правилом.
• Комбинаторы и универсальный селектор не учитываются (более подробно об этих значениях позже).

Таким образом, вычисляя специфичность следующих селекторов правил, получаем:

h1 {color: red;} /* специфичность = 0,0,0,1 */
p em {color: purple;} /* специфичность = 0,0,0,2 */
.grape {color: purple;} /* специфичность = 0,0,1,0 */
*.bright {color: yellow;} /* специфичность = 0,0,1,0 */
p.bright em.dark {color: maroon;} /* специфичность = 0,0,2,2 */
#id216 {color: blue;} /* специфичность = 0,1,0,0 */
div#sidebar *[href] {color: silver;} /* специфичность = 0,1,1,1 */

В приведенном выше примере элементу em сопоставляются второе и пятое правила, при этом цвет элемента будет красно-коричневым, потому что специфичность пятого правила больше.


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

h1 {color: red;} /* 0,0,0,1 */
body h1 {color: green;} /* 0,0,0,2 (победитель)*/
h2.grape {color: purple;} /* 0,0,1,1 (победитель) */
h2 {color: silver;} /* 0,0,0,1 */
html > body table tr[id="totals"] td ul > li {color: maroon;} /* 0,0,1,7 */
li#answer {color: navy;} /* 0,1,0,1 (победитель) */

Правило-победитель в каждой паре определяется по более высокому показателю специфичности. Обратите внимание, как они сортируются. Во второй паре выигрывает селектор h2.grape, потому что у него на одну единицу больше: 0,0,1,1 побеждает 0,0,0,1. В третьей паре выигрышным является второе правило, потому что 0,1,0,1 берет верх над 0,0,1,7. Фактически значение специфичности 0,0,1,0 выиграет и у значения 0,0,0,13. Дело в том, что вес значения растет слева направо. Специфичность 1,0,0,0 возьмет верх над любой специфичностью, которая начинается с 0, независимо от того, какими будут остальные числа. Таким образом, 0,1,0,1 выигрывает у 0,0,1,7, потому что 1, стоящая на втором месте первого значения, побеждает 0 на этом месте во втором значении.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Важность
Каскад
Наследование
Объявления и специфичность
Сортировка по порядку расположения

Вернуться в раздел: CSS / 3. Структура и каскад