CSS 类重复以增加特异性

Posted

技术标签:

【中文标题】CSS 类重复以增加特异性【英文标题】:CSS class repetition to increase specificity 【发布时间】:2012-07-19 07:13:41 【问题描述】:

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


?

【问题讨论】:

我猜这将是特定于浏览器的。 【参考方案1】:

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

【讨论】:

谢谢你的建议,我很可能会使用这个,但是......我仍然不知道我的问题的答案 !important 不能随便使用。您必须真正考虑到使用特异性等确实没有其他方法......只有这样您才应该使用!important。【参考方案2】:

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

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

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

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

【讨论】:

谢谢! :) 出于好奇,您使用什么浏览器?在 safari 上工作,准备测试 firefox 我在最新版本的 Chrome、Firefox、Safari 和 IE 中进行了测试。每个都得到相同的结果。 这种行为是浏览器的意图和要求。请参阅我的答案以供参考。【参考方案3】:

是的,这是可能的,也是有意的。虽然这在 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

另外,最后一个选择器中的空格是 descendant 组合子; child 组合子是>

【讨论】:

我刚刚在 Material Design Lite 中遇到过它,我不得不说这一定是我遇到过的最奇怪的 CSS 意大利面条。我无法理解有些人认为在 CSS 库中使用类似的东西是个好主意。 用 4 个数字指定 CSS 特异性不是一种常见的做法吗? (内联样式、ID、类、元素,即 x.x.x.x) @Remi:过去 CSS2 就是这种情况,因为它是一个单一的规范。既然 Selectors 是一个单独的规范,在比较选择器的特异性时,可以假设内联样式是无关紧要的,因为无论如何选择器都不能出现在内联样式属性中。所以最新的规格(L3 和 L4)都使用 3 个数字。尽管我想知道是否包括第 4 个数字会有所帮助,即使只要不讨论内联样式,它就始终为零。

以上是关于CSS 类重复以增加特异性的主要内容,如果未能解决你的问题,请参考以下文章

#id#id :重复出现相同的简单选择器应该会增加特异性,但对于 IE9 中的 ID 不会

为啥禁用 CSS 规则 [重复]

:not 伪类是不是增加了选择器的特异性?

嵌套 CSS 选择器而不增加特异性

了解特异性:在不使用 !important 的情况下实现所需的选择器结果 [重复]

转录组中 实验设计 的相关问题