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 不会