CSS 类重复以增加特异性

Posted 2023-03-06

【中文标题】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 个数字会有所帮助，即使只要不讨论内联样式，它就始终为零。