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

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

Это указывает, что специфика является системой зарабатывания очков для CSS. Это говорит нам, что элементы стоят 1 точку, классы стоят 10 точек, и идентификаторы стоят 100 точек. Это также продолжается, вершина говорят, что эти точки просуммированы, и полная сумма то, что специфика селектора.

Например:

тело = 1 точка
тело .wrapper = 11 точек
тело .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;
}
This should be blue.

Почему текст является красным, когда 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)

122
задан TylerH 31 October 2019 в 18:58
поделиться