Указывает на специфичность в CSS

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

Я не могу сказать наверняка-все статьи, которые мне удается найти, избегают примера нескольких классов, например здесь - но я предполагаю, что когда дело доходит до сравнения специфичность между селектором класса и идентификатором, класс вычисляется со значением 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

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

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

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

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

Глава 1, Страница 16 гласит:

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

(выделено мной) и

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

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

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

---

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

текущего Селекторы Уровня 4 Рабочий Проект делает хорошую работу с описанием специфичности в CSS:

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

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

15 классов не дают вашему селектору оценку специфичности 150, это дает ему B значение 15. Один A значение достаточно, чтобы осилить это.

в качестве метафоры представьте себе семью из 1 великого родителя, 1 родителя и 1 ребенка. Это может быть представлено как 1,1,1. Если у родителя есть 15 детей, это не делает их внезапно другим родителем ( 1,2,0). Это означает, что родитель несет гораздо больше ответственности, чем они имели только с 1 ребенком ( 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 значение стал наш!--6-->A значение. Документация уровня 4 селекторов полностью освещает эту проблему, заявляя, что предел никогда не может быть превышен. С этой реализацией,и 255 и 256 классы будут иметь то же самое A, B, c счетом 0,255,0.

проблема данный В ответе Фауста с тех пор был основные в большинстве современных браузеров.

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

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

есть также довольно хороший калькулятор специфичности здесь. Вы можете привести свой пример (#A и .один.б.с. д. е.Ф. г. ч. я. Дж. тысяча.л. м. северный. о) там и посмотрим результаты.

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

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

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

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

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

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/

"Если 5things говорят красный и 3 говорят синий ну я иду красный"