CSS类重复以增加特异性 [英] CSS class repetition to increase specificity

问题描述

根据CSS文档：
http：// www。 w3.org/TR/CSS21/cascade.html#specificity

特定性由（其中包括）属性和伪类的数量选择器。

所以，我的问题是，是否可以通过重复相同的类名来提高特异性？

例如：

会

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

特异性

  .qtxt.lalgn 
 {
} 
  

或

  .lalgn .qtxt // （添加空间以创建子选择器）
 {
} 
  

p>

解决方案

是的，这是可能的，故意这样。虽然这在CSS2规范中未提及，但在选择器3规范中明确提及： / p>

因此，当遇到重复的简单选择器时，浏览器必须增加特异性，只要选择器有效且适用。这不仅适用于重复的类，而且适用于重复的ID，属性和伪类。

给定您的代码， .qtxt.qtxt .qtxt.qtxt.qtxt 将具有最高的特异性。其他两个选择器同样具体;组合器在特异性计算中完全没有影响：

  / * 5 classes  - > specific = 0-5-0 * / 
 .qtxt.qtxt.qtxt.qtxt.qtxt 
 
 / * 2 classes  - > specific = 0-2-0 * / 
 .qtxt.lalgn 
 
 / * 2 classes  - > specific = 0-2-0 * / 
 .lalgn .qtxt 
  

在最后一个选择器中是子孙组合器; 组合器是> 。

According to the CSS docs: http://www.w3.org/TR/CSS21/cascade.html#specificity

Specificity is defined by (amongst other things) the number of attributes and pseudo-classes in the selector.

So, my question is, is it possible to increase specificity by repeating the same classname over and over again?

For instance:

would

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

have a higher specificity than

.qtxt.lalgn
{
}

or

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

?

解决方案

Yes, it is possible and intentionally so. While this is not mentioned in the CSS2 spec, it is explicitly mentioned in the Selectors 3 spec:

Note: Repeated occurrances [sic] of the same simple selector are allowed and do increase specificity.

Therefore browsers must increase the specificity when encountering repeated simple selectors, as long as the selector is valid and applicable. This not only applies to repeated classes, but also applies to repeated IDs, attributes and pseudo-classes.

Given your code, .qtxt.qtxt.qtxt.qtxt.qtxt will have the highest specificity. The other two selectors are equally specific; combinators have no bearing in specificity calculations at all:

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

Also, the space in your last selector is the descendant combinator; the child combinator is >.

这篇关于CSS类重复以增加特异性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！