Очки в специфике CSS - PullRequest
Новая
       48

Очки в специфике CSS

120 голосов
/ 11 мая 2010

Исследуя специфику, я наткнулся на этот блог - http://www.htmldog.com/guides/cssadvanced/specificity/

В нем говорится, что специфичность - это система начисления очков для CSS. Это говорит нам о том, что элементы стоят 1 балл, классы - 10 баллов, а идентификаторы - 100 баллов. Это также говорит о том, что эти очки суммируются, и общая сумма является специфичностью этого селектора.

Например:

тело = 1 балл
body .wrapper = 11 баллов
body .wrapper # container = 111 баллов

Таким образом, при использовании этих точек следующие CSS и HTML приведут к синему тексту:

CSS: 

#a {
    color: red;
}

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
  color: blue;
}

HTML: 

<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>

РЕЗУЛЬТАТ:

http://jsfiddle.net/hkqCF/

Почему текст красный, если 15 классов будут равны 150 баллам по сравнению с 1 идентификатором, равным 100 баллам?

EDIT:

Так что, очевидно, точки не просто суммированы, они объединены. Подробнее об этом читайте здесь - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html НО, означает ли это, что классы в нашем селекторе = 0,0,15,0 ИЛИ 0,1,5,0?

Мои инстинкты говорят мне, что это первое, поскольку мы ЗНАЕМ, что специфика селектора идентификаторов выглядит следующим образом: 0,1,0,0

Ответы [ 7 ]

134 голосов
/ 13 августа 2012

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

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

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

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

Так что, по сути, существует "система баллов", но это не база 10. Это база 256. Вот как это работает:

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

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

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

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

28 голосов
/ 11 мая 2010

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

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

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

8 голосов
/ 14 марта 2016

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

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

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

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

В качестве метафоры представьте семью из 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 . Документация по Selectors Level 4 полностью освещает эту проблему, утверждая, что предел никогда не может быть переполнен. В этой реализации оба 255 и 256 классов будут иметь одинаковые A, B, c балл 0,255,0 .

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

8 голосов
/ 16 февраля 2012

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

Глава 1, стр. 16 гласит:

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

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

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

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

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

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

4 голосов
/ 03 февраля 2017

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

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

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

Пример таблицы медалей Олимпийских игр 2016 года в Рио выглядит следующим образом enter image description here

3 голосов
/ 11 мая 2010

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

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

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

1 голос
/ 11 мая 2010

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

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/

"если 5-е говорят, что красный, а 3 говорят, что синий хорошо, то Има становится красным"

...