Повторение класса CSS для повышения специфичности

согласно документам CSS: http://www.w3.org/TR/CSS21/cascade.html#specificity

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

Итак, мой вопрос в том, можно ли увеличить спецификацию, повторяя одно и то же имя класса снова и снова?

например:

б

.qtxt.qtxt.qtxt.qtxt.qtxt
{
}

имеют более высокую специфичность чем

.qtxt.lalgn
{
}

или

.lalgn .qtxt//(space added to create child selector)
{
}

?

13
css css-selectors css-specificity

3 ответов

Да, это возможно и намеренно так. Хотя это не упоминается в спецификации CSS2, это явно упоминается в селекторы 3 spec:

Примечание: повторные вхождения [sic] того же простого селектора разрешены и увеличивают специфичность.

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

приведенный код .qtxt.qtxt.qtxt.qtxt.qtxt будет иметь самую высокую спецификацию. Два других селектора одинаково специфичны; комбинаторы вообще не имеют отношения к вычислениям специфичности:

/* 5 classes -> specificity = 0-5-0 */
.qtxt.qtxt.qtxt.qtxt.qtxt

/* 2 classes -> specificity = 0-2-0 */
.qtxt.lalgn

/* 2 classes -> specificity = 0-2-0 */
.lalgn .qtxt

кроме того, пробел в вашем последнем селекторе -потомок комбинатора; с ребенок Combinator является >.

22

.qtxt.qtxt.qtxt будет иметь самую высокую спецификацию...

http://jsfiddle.net/nXBTp/1/

однако это только в том случае, если вы повторяете имя класса больше раз, чем любой другой селектор, например:

http://jsfiddle.net/nXBTp/2/

1

вам не нужно взломать спецификацию, как это... если вам нужно заставить значение, используйте !important.

-4