Исследуя специфичность, я наткнулся на этот блог - http://www.htmldog.com/guides/cssadvanced/specificity/
В нем говорится, что специфичность - это система баллов для CSS. Он сообщает нам, что элементы приносят 1 балл, классы приносят 10 баллов, а идентификаторы приносят 100 баллов. Сверху также говорится, что эти баллы суммированы, и общая сумма зависит от специфики этого селектора.
Например:
body = 1 балл
body .wrapper = 11 баллов
body .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;
}<div class="a">
<div class="b">
<div class="c">
<div class="d">
<div class="e">
<div class="f">
<div class="g">
<div class="h">
<div class="i">
<div class="j">
<div class="k">
<div class="l">
<div class="m">
<div class="n">
<div class="o" id="a">
This should be blue.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Почему текст красный, если 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)
Ответы:
Ответ Пекка в это практически правильно, и , вероятно , лучший способ думать о проблеме.
Однако, как многие уже отметили, рекомендация W3C CSS гласит: «Объединение трех чисел abc (в системе счисления с большим основанием) дает конкретность». Так что компьютерщик во мне просто должен был выяснить, насколько велика эта база.
Оказывается, что «очень большая база», используемая (по крайней мере, в 4 наиболее часто используемых браузерах * ) для реализации этого стандартного алгоритма, составляет 256 или 28 .
Это означает, что стиль, указанный с 0 идентификаторами и 256 именами классов, будет иметь приоритет над стилем, указанным только с 1 идентификатором. Я проверил это на нескольких скрипках:
... и 256 теги наименований являются достаточно переопределить имя - класс-
... но, увы 256 идентификаторы не достаточно , чтобы переопределить 1 встроенный стиль (обновление 2012/8/15 - вы должны будете использовать
!important)Таким образом, фактически существует «балльная система», но это не система счисления 10. Это система счисления 256. Вот как это работает:
(2 8 ) 2 или 65536, умноженное на количество идентификаторов в селекторе
+ (2 8 ) 1 или 256, умноженное на количество имен классов в селекторе
+ (2 8 ) 0 или 1, умноженное на количество тегов- имена в селекторе
Это не очень практично для упражнений на обратной стороне конверта для передачи концепции.
Вероятно, поэтому в статьях по этой теме используется база 10.
***** [Opera использует 2 16 (см. Комментарий karlcow). Некоторые другие селекторные механизмы используют бесконечность - фактически без балльной системы (см. Комментарий Саймона Сапина).]
Обновление, июль 2014 г .:
как ранее в этом году Блейзмонгер указал, браузеры webkit (chrome, safari) теперь, похоже, используют базу выше 256. Возможно, 2 16 , как Opera? IE и Firefox по-прежнему используют 256.
источник
Хороший вопрос.
Я не могу сказать наверняка - все статьи, которые мне удалось найти, избегают примера нескольких классов, например здесь, - но я предполагаю, что когда дело доходит до сравнения специфичности между селектором класса и идентификатором , класс вычисляется с помощью
15только значение , независимо от того, насколько оно детализировано.Это соответствует моему опыту в том, как ведет себя специфичность.
Однако должно быть некоторое наложение классов, потому что
более конкретен, чем
единственное объяснение, которое у меня есть, это то, что специфичность составных классов рассчитывается только по отношению друг к другу, но не по идентификаторам.
Обновление : я на полпути понял. Это не балльная система, и информация о классах с весом 15 баллов неверна. Это система нумерации 4-часть очень хорошо объяснено здесь .
Отправная точка - 4 цифры:
Согласно объяснению специфичности W3C , значения специфичности для вышеупомянутых правил следующие:
это система нумерации с очень большой (неопределенной?) базой.
Насколько я понимаю, поскольку база очень большая, никакое число в столбце 4 не может превзойти число> 0 в столбце 3, то же самое для столбца 2, столбца 1 .... Это правильно?
Мне было бы интересно, мог бы кто-нибудь с большим пониманием математики, чем я, объяснить эту систему счисления и как преобразовать ее в десятичную, когда отдельные элементы больше 9.
источник
Текущий рабочий черновик Selectors Level 4 хорошо описывает специфичность CSS:
Это означает, что значения A, B и C полностью независимы друг от друга.
15 классов не дают вашему селектору 150 баллов за специфичность, они дают ему значение B, равное 15. Одного значения A достаточно, чтобы преодолеть это.
В качестве метафоры представьте себе семью из 1 главного родителя, 1 родителя и 1 ребенка. Это может быть представлено как 1,1,1 . Если у родителя 15 детей, это не делает их еще одним родителем ( 1,2,0 ). Это означает, что на родителях лежит гораздо больше ответственности, чем с одним ребенком ( 1,1,15 ). ;)
В той же документации также говорится:
Это было добавлено для решения проблемы, представленной в ответе Фауста , в результате чего реализации CSS еще в 2012 году позволяли значениям специфичности перетекать друг в друга.
Еще в 2012 году в большинстве браузеров было реализовано ограничение 255, но это ограничение допускало переполнение. 255 классов имели A, B, C специфичность балла 0,255,0 , но 256 классов переполнены и имели А, B, C балл 1,0,0 . Внезапно наш B значение стало нашим значением. Документация Selectors Level 4 полностью освещает эту проблему, заявляя, что предел никогда не может выйти за пределы. С этой реализацией, как 255 и 256 классов будут иметь тот же A, B, C балл 0,255,0 .
Проблема, указанная в ответе Фауста, с тех пор исправлена в большинстве современных браузеров.
источник
В настоящее время я использую книгу « Мастерство CSS: передовые решения для веб-стандартов» .
Глава 1, страница 16 говорит:
(курсив мой) и
Далее говорится, что вы часто можете выполнять вычисления в базе 10, но только если все столбцы имеют значения меньше 10.
В ваших примерах идентификаторы не приносят 100 баллов; каждый стоит
[0, 1, 0, 0]очков. Следовательно, один идентификатор[0, 1, 0, 0]лучше 15 классов, потому что он больше, чем[0, 0, 15, 0]в системе с большим числом оснований.источник
Мне нравится сравнивать рейтинг Специфичности с таблицей медалей Олимпийских игр (метод сначала золото - сначала по количеству золотых медалей, затем серебряных, а затем бронзовых).
Это работает и с вашим вопросом (огромное количество селекторов в одной группе специфики). Специфика рассматривалась каждой группой в отдельности. В реальном мире я очень редко встречал случаи с более чем десятком селекторов).
Существует также довольно хороший калькулятор Специфичность доступны здесь . Вы можете поместить туда свой пример (#a и .a .b .c .d .e .f .g .h .i .j .k .l .m .n .o) и посмотреть результаты.
Пример таблицы медалей Олимпийских игр в Рио-2016 выглядит так
источник
Я не верю, что объяснение в блоге правильное. Спецификация здесь:
http://www.w3.org/TR/CSS2/cascade.html#specificity
«Очки» из селектора класса не могут быть более важными, чем селектор «id». Это просто так не работает.
источник
Я бы сказал, что:
Я думаю, они складываются только в зависимости от того, что вы получаете, если оно кратно одному и тому же. Таким образом, класс всегда будет перекрывать элемент и идентификатор всегда над классом, но если он ограничен тем, какой из 4 элементов, где 3 - синий, а 1 - красный, он будет синим.
Например:
Должно получиться красным.
См. Пример http://jsfiddle.net/RWFWq/
"если пятеро говорят красное, а трое говорят синее, хорошо, я иду красным"
источник