首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >CSS类的重复以增加特异性

CSS类的重复以增加特异性
EN

Stack Overflow用户
提问于 2012-07-20 10:34:45
回答 3查看 5.1K关注 0票数 22

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

特异性由选择器中的属性和伪类的数量来定义(以及其他)。

所以,我的问题是,是否有可能通过一遍又一遍地重复相同的类名来增加特异性?

例如:

将会

代码语言:javascript
复制
.qtxt.qtxt.qtxt.qtxt.qtxt
{
}

具有更高的特异性

代码语言:javascript
复制
.qtxt.lalgn
{
}

代码语言:javascript
复制
.lalgn .qtxt//(space added to create child selector)
{
}
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-07-20 22:11:25

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

注意:允许重复出现相同的简单选择器sic,并且确实增加了特异性。

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

对于您的代码,.qtxt.qtxt.qtxt.qtxt.qtxt将具有最高的特异性。另外两个选择器是同样具体的;组合符在特异性计算中完全没有影响:

代码语言:javascript
复制
/* 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

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

票数 31
EN

Stack Overflow用户

发布于 2012-07-20 12:26:00

.qtxt.qtxt.qtxt会有最高的特异性。

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

但是,只有在重复类名的次数超过任何其他选择器的次数时才会出现这种情况,例如:

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

票数 1
EN

Stack Overflow用户

发布于 2012-07-20 10:38:23

你不应该像这样破解细节...如果需要强制设置值,请使用!important

票数 -6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11572081

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档