CSS类重复,以增加特异性(CSS class repetition to increase spe

2019-06-26 09:54发布

按照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规范中提到,它明确提到选择器3规格 :

注:相同的简单选择的重复occurrances [原文]是允许的,这样做增加特异性。

因此遇到重复的简单的选择时,只要选择是有效的和适用的浏览器必须增加特异性。 这不仅适用于重复的课程,同时也适用于重复的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

此外,在你最后的选择空间为后代组合子; 孩子是组合子>



Answer 2:

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

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

然而,这只是个案,如果你重复类名多次,任何其他选择,例如:

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



Answer 3:

你不应该需要破解的特异性这样......如果你需要强制的值,使用!important



文章来源: CSS class repetition to increase specificity