Точки в спецификации CSS

Ответ 1

Ответ Pekka является практически правильным и, вероятно, лучшим способом подумать о проблеме.

Однако, как уже отмечалось многими, рекомендация CSS W3C гласит, что "объединение трех чисел a-b-c (в системе с большой базой) дает специфику". Так что выродка во мне просто должна была выяснить, насколько велика эта база.

Оказывается, что "очень большая база", используемая (по крайней мере, четырьмя наиболее часто используемыми браузерами ^*) для реализации этого стандартного алгоритма, составляет 256 или 2 ⁸.

Это означает, что стиль, заданный с 0 идентификаторами и 256 именами классов, будет превышать стиль, указанный только с одним идентификатором. Я проверил это с помощью некоторых скриптов:

• 255 классов недостаточно для переопределения 1 id
• ... но 256 классов достаточно, чтобы переопределить 1 id

• ... и 256 тегов-имен достаточно, чтобы переопределить одно имя класса

• ... но, увы, 256 идентификаторов недостаточно, чтобы переопределить 1 встроенный стиль (Обновлено 2012/8/15 - вам нужно будет использовать !important)

Таким образом, существует, фактически, "точечная система", но она не база 10. Она основывается на 256. Здесь как это работает:

(2 ⁸) ² или 65536, умноженное на число идентификаторов в селекторе
+ (2 ⁸) ¹ или 256, умноженное на количество имен классов в селекторе
+ (2 ⁸) ⁰ или 1, умноженное на количество имен тегов в селекторе

Это не очень практично для упражнений на заднем плане, чтобы передать концепцию.
Вероятно, почему статьи по этой теме используют базу 10.

***** [Opera использует 2 ¹⁶ (см. комментарий karlcows). Некоторые другие селекторные двигатели используют бесконечность - фактически нет системы баллов (см. Комментарий Саймона Сапина).]

Обновление, июль 2014:
Как отметил Блейзмонгер ранее в этом году, браузеры webkit (хром, сафари) теперь используют более высокую базу, чем 256. Возможно, 2 ¹⁶ например Opera? IE и Firefox по-прежнему используют 256.

Ответ 2

Хороший вопрос.

Я не могу точно сказать - все статьи, которые мне удалось найти, избегают примера нескольких классов, например. здесь - но я предполагаю, что когда дело доходит до сравнения спецификации между селектором классов и идентификатором, класс вычисляется со значением 15 только, как бы он ни был подробным.

Это соответствует моему опыту в отношении того, как себя ведет себя.

Тем не менее, должна быть некоторая укладка классов, потому что

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o

более конкретна, чем

.o

Единственное объяснение, которое у меня есть, заключается в том, что специфика уложенных классов вычисляется только друг против друга, но не против идентификаторов.

Обновление: я на полпути получаю его сейчас. Это не система баллов, а информация о классах весом 15 баллов неверна. Это система нумерации на 4 части, очень хорошо объясненная здесь здесь.

Исходная точка - 4 цифры:

style  id   class element
0,     0,   0,    0

В соответствии с объяснением W3C по специфике значения специфичности для вышеупомянутых правил:

#a            0,1,0,0    = 100
classes       0,0,15,0   = ... see the comments

это система нумерации с очень большой (undefined?) базой.

Мое понимание состоит в том, что, поскольку база очень большая, число в столбце 4 не может бить число > 0 в столбце 3, то же самое для столбца 2, столбец 1.... Правильно ли это?

Мне было бы интересно, сможет ли кто-нибудь, кто лучше разбирается в Math, чем я, объяснить систему нумерации и как преобразовать ее в десятичную, когда отдельные элементы больше 9.

Ответ 3

В настоящее время я использую книгу Мастерство CSS: Расширенные решения для веб-стандартов.

В главе 1, стр. 16 говорится:

Чтобы рассчитать, как определено конкретное правило, назначается каждый тип селектора числовое значение. Специфика правила затем вычисляется по формуле добавляя значение каждого из своих селекторов. К сожалению, специфика не рассчитывается в базе 10, а высокая, неопределенная, базовая номер. Это делается для обеспечения того, чтобы высокоспециализированный селектор, такой как ID селектор, никогда не переопределяется множеством менее специфических селекторов, таких как селектор типов.

(акцент мой) и

Специфика селектора разбивается на четыре составляющих уровни: a, b, c и d.

• если стиль является встроенным, тогда a = 1
• b = общее количество селекторов id
• c = число классов, псевдокласса и селекторов атрибутов
• d = количество селекторов типов и селекторов псевдоэлементов

Далее говорится, что вы можете часто выполнять вычисления в base-10, но только если все столбцы имеют значения меньше 10.

В ваших примерах идентификаторы не стоят 100 баллов; каждая из них стоит [0, 1, 0, 0] очков. Таким образом, один id использует 15 классов, потому что [0, 1, 0, 0] больше, чем [0, 0, 15, 0] в системе с высокими номерами.

Ответ 4

Текущий Селекторный уровень 4 Рабочий проект отлично справляется с описанием Специфика в CSS:

Специфичность сравнивается путем сравнения трех компонентов по порядку: специфичность с большим значением А более конкретна; если два значения A связаны, то специфика с большим значением B более конкретна; если два значения B также привязаны, то специфика с большим значением c более конкретна; если все значения привязаны, эти два значения равны.

Это означает, что значения A, B и C полностью независимы друг от друга.

15 классов не дают вашему селектору значение специфичности в 150, оно дает значение B 15. Для одного из них достаточно одного значения.

Как метафора, представьте себе семью из 1 великого родителя, 1 родителя и 1 ребенка. Это может быть представлено как 1,1,1. Если у родителя 15 детей, это не делает их еще одним родителем (1,2,0). Это означает, что у родителя намного больше ответственности, чем у одного ребенка (1,1,15).;)

В той же документации также говорится:

Из-за ограничений хранилища реализации могут иметь ограничения на размер A, B или c. Если это так, значения, превышающие предел, должны быть зажаты до этого предела, а не переполнения.

Это было добавлено для решения проблемы, представленной в ответе Фауста, в результате чего реализация CSS в 2012 году позволила перечислить значения специфичности друг другу.

В 2012 году в большинстве браузеров реализовано ограничение на 255, но это ограничение было разрешено переполнять. 255 классов имели оценку специфичности A, B, c 0,255,0, но 256 классов переполнены и имели показатель A, B, c 1,0,0. Внезапно наше значение B стало нашим значением A. Документация Уровни 4-го уровня полностью облучает эту проблему, заявляя, что предел никогда не может быть переполнен. С этой реализацией оба класса 255 и 256 будут иметь тот же показатель A, B, c 0,255,0.

Проблема, данная в ответе Фауста, была исправлена ​​в большинстве современных браузеров.

Ответ 5

Я не верю, что объяснение в блоге верное. Спецификация находится здесь:

http://www.w3.org/TR/CSS2/cascade.html#specificity

"Точки" из селектора классов не могут быть более важными, чем селектор "id". Это просто не работает.

Ответ 6

Я увлекаюсь сравнением ранжирования спецификаций с таблицей медалей Олимпийских игр (первый метод золота - первый по количеству золотых медалей, затем серебряный, а затем бронзовый).

Он также работает с вашим вопросом (огромное количество селекторов в одной группе специфичности). Специфичность рассматривалась каждой группой отдельно. В реальном мире я очень редко видел случай с более чем дюжиной селекторов).

Существует также неплохой калькулятор специфичности здесь. Вы можете поместить свой пример (#a и .a.b.c.d.e.f.g.h.i.j.k.l.m.n.o) и увидеть результаты.

Пример таблицы медалей Олимпийских игр в Рио-2016 выглядит

Ответ 7

Я бы сказал, что:

Element < Class < 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/

", если пятьдесят говорят, что красный и 3 говорят, что синий колодец Ima go red"