CSS类重复增加特异性

时间:2012-07-20 02:34:45

标签: css css-selectors css-specificity

根据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)
{
}

3 个答案:

答案 0 :(得分:24)

是的,这是可能的,也是故意的。虽然CSS2规范中没有提到这一点,但在Selectors 3 spec

中明确提到了这一点
  

注意:允许同一个简单选择器的重复出现 [sic] 并提高特异性。

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

鉴于您的代码,.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

此外,最后一个选择器中的空格是后代组合子; 组合子是>

答案 1 :(得分:1)

.qtxt.qtxt.qtxt具有最高的特异性......

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

但是,如果您重复类名称的次数超过任何其他选择器,则只会出现这种情况,例如:

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

答案 2 :(得分:-6)

你不应该像这样破解特殊性......如果你需要强制一个值,请使用!important