CSS类重复增加特异性

Question

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

？

Answer 1

是的,这是可能的,也是故意的.虽然CSS2规范中没有提到这一点,但在Selectors 3规范中明确提到了它:

注意:允许相同简单选择器的重复出现[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

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