it-swarm.com.ru

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

Изучая специфику, я наткнулся на этот блог - 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 баллам, а один идентификатор равен 100 баллам?

EDIT:

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

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

120
Sam

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

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

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

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

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

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

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

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

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

134
Faust

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

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

Это соответствует моему опыту в том, как ведет себя специфика.

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

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

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

.o

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

Обновление : я на полпути получаю это сейчас. Это не система баллов, и информация о классах весом 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 ... Это правильно?

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

28
Pekka 웃

В настоящее время я использую книгу CSS Mastery: Advanced Web Standards Solutions .

Глава 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] в системе счисления с высоким базовым значением.

8
Matt Fenwick

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

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

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

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

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

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

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

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

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

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

8
James Donnelly

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

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

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

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

4
rkarczmarczyk

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

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

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

3
Matthew Wilson

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

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 говорят, что синий хорошо, то Има становится красным

1
Sphvn