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

Согласно the specification, второе правило имеет больше специфики, а текст должен быть синим, но он красным.Почему формула специфичности не работает для десяти закрытых тегов?

/** specificity = 10 */ 
 
.my{ 
 
    background-color: red; 
 
} 
 

 
/** specificity = 12 */ 
 
html body div b i strong em span font strike ul li{ 
 
     background-color: blue; 
 
}

<html> 
 
<body> 
 
<div> 
 
<b><i><strong><em><span><font><strike><ul><li class="my">SUPER</li></ul></strike></font></span></em></strong></i></b> 
 
</div> 
 
</body> 
 
</html>

источник

2016-10-17 Iaroslav Baranov

Поскольку '' 0,0,1,0 НЕ 10. –

Специфичность больше матрицы и ** не ** бальная система вы можете добавить вверх. Раньше в веб-разработчике я совершил ту же ошибку. Селекторы, помещенные в четыре категории с более высоким весом, дают тем, кто движется справа налево. Общее количество не перевешивает общее число влево, если это число не равно 0, то есть '0, 1, 0, 0'>' 0, 0, 150, 0'. – hungerstar

Смотрите эти правила из CSS Tricks:

Для каждого значения класса (или псевдо-класса или селектор атрибута), применяются 0,0,1,0 баллов

Для каждого элемента ссылки, применять 0,0,0,1 точка

https://css-tricks.com/specifics-on-css-specificity/

Поэтому ваш первый пример имеет 0,0,1,0 точек. В то время как ваш второй имеет 0,0,0,12 балла.

0,0,1,0> 0,0,0,12

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

CSS Tricks

источник

2016-10-17 14:03:16 Curt

Второе правило имеет более специфичность только, если правило имеет тот же селектор иерархии. Если у вас есть класс (который более конкретный), он будет принят.

Вы можете использовать li.my:

/** specificity = 10 */ 
 
.my{ 
 
    background-color: red; 
 
} 
 

 
/** specificity = 12 */ 
 
html body div b i strong em span font strike ul li.my { 
 
     background-color: blue; 
 
}

<html> 
 
<body> 
 
<div> 
 
<b><i><strong><em><span><font><strike><ul><li class="my">SUPER</li></ul></strike></font></span></em></strong></i></b> 
 
</div> 
 
</body> 
 
</html>

источник

2016-10-17 14:03:06 Dekel

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

ответ

Смежные вопросы