Точки в специфике CSS
При исследовании специфики я наткнулся на этот блог - http://www.htmldog.com/guides/cssadvanced/specificity/
Это указывает, что специфика является системой зарабатывания очков для CSS. Это говорит нам, что элементы стоят 1 точку, классы стоят 10 точек, и идентификаторы стоят 100 точек. Это также продолжается, вершина говорят, что эти точки просуммированы, и полная сумма то, что специфика селектора.
Например:
тело = 1 точка
тело .wrapper = 11 точек
тело .wrapper #container = 111 точек
Так, с помощью этих точек я ожидаю, что следующий CSS и HTML приведут к тексту, являющемуся синим:
#a {
color: red;
}
.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
color: blue;
}
This should be blue.
Почему текст является красным, когда 15 классов равнялись бы 150 точкам по сравнению с 1 идентификатором, который равняется 100 точкам?
По-видимому, точки не просто просуммированы; они связываются. Читайте больше об этом здесь - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Делает это означает что классы в нашем селекторе = 0,0,15,0 ИЛИ 0,1,5,0?
(мои инстинкты говорят мне, что это - первый, поскольку мы ЗНАЕМ, что идентификационная специфика селектора похожа на это: 0,1,0,0)
3 ответа
Хороший вопрос.
Я не могу сказать наверняка - все статьи, которые мне удалось найти, избегают примера нескольких классов, например здесь - но я предполагаю, что когда дело доходит до сравнения специфичности между селектором класса и идентификатором , класс вычисляется только со значением 15 , независимо от того, насколько он детализирован.
Это соответствует моему опыту в том, как ведет себя специфичность.
Однако должно быть некоторое наложение классов, потому что
.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o
более конкретен, чем
.o
, единственное объяснение, которое у меня есть, состоит в том, что специфичность сложенных классов рассчитывается только относительно друг друга, но не относительно ID.
Обновление : я уже на полпути. Это не балльная система, и информация о классах с весом 15 баллов неверна. Это четырехкомпонентная система нумерации, которая очень хорошо объясняется здесь .
Отправной точкой являются 4 цифры:
style id class element
0, 0, 0, 0
Согласно объяснению W3C по специфичности , значения специфичности для вышеупомянутых правил следующие:
#a 0,1,0,0 = 100
classes 0,0,15,0 = ... see the comments
это система нумерации с очень большим (неопределенным ?) база.
Насколько я понимаю, из-за того, что база очень большая, никакое число в столбце 4 не может превзойти число> 0 в столбце 3, то же самое для столбца 2, столбца 1 .... Это правильно?
I ' Меня интересует, сможет ли кто-нибудь, лучше меня разбирающийся в математике, объяснить эту систему счисления и как преобразовать ее в десятичную, если отдельные элементы больше 9.
Я бы сказал, что:
Element < Class < ID
Я думаю, что они складываются в зависимости от того, что вы получаете, только если это кратно одному и тому же. Таким образом, класс всегда будет превышать элемент, а ID всегда будет превышать класс, но если дело доходит до того, какой из 4 элементов, где 3 синие, а 1 красный, будет синим.
Например:
.a .b .c .d .e .f .g .h .i .j .k .l
{
color: red;
}
.m .n .o
{
color blue;
}
Должен получиться красный.
См. Пример http://jsfiddle.net/RWFWq/
"Если 5 элементов говорят красный, а 3 - синий, то я выбираю красный"
Я не верю, что объяснение в блоге правильное. Спецификация находится здесь:
http://www.w3.org/TR/CSS2/cascade.html#specificity
«Очки» из селектора класса не могут быть более важными, чем «идентификатор». "селектор. Это просто так не работает.