CSS类重复以增加特异性

按照CSS文档： http://www.w3.org/TR/CSS21/cascade.html#specificity CSS类重复以增加特异性

特异性通过（除其他事项外）在选择器属性和伪类的数量来定义。

所以，我的问题是，是否有可能通过一遍又一遍地重复相同的类名来提高特异性？

例如：

会

.qtxt.qtxt.qtxt.qtxt.qtxt 
{ 
}

比

.qtxt.lalgn 
{ 
}

或

.lalgn .qtxt//(space added to create child selector) 
{ 
}

更高的特异性？

来源

2012-07-20 Georges Oates Larsen

我会猜测这将会是特定于浏览器的。 – 2012-07-20 02:47:45

是的，这是可能的，故意这样做。虽然这不是在CSS2规范中提到，明确在Selectors 3 spec提到：

注：重复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

而且，在你最后的选择空间是后裔组合子; 孩子组合子是>。

来源

2012-07-20 14:11:25 BoltClock

我刚刚在Material Design Lite中遇到过它，我必须说这必须是我遇到过的最怪异的CSS意大利面条可憎之物。我无法理解，有些人认为在CSS库中使用类似这样的东西是一个好主意。 – Senthe 2016-10-25 12:44:10

-3

您不应该需要像这样破解专用性...如果您需要强制设置值，请使用!important。

来源

2012-07-20 02:38:23 Scotty

谢谢你的建议，我很可能会使用这个，但是...我仍然不知道我的问题的答案 – 2012-07-20 02:42:31

！重要的是不能轻易使用。你必须真的认为，真的没有其他方式使用特异性等......只有这样你才能使用！重要的。 – brunoais 2012-10-25 21:56:52

组合类不是黑客，它是用于提高特性的官方CSS规范。使用'！important'表示noob状态和css的无知。很少有人使用！重要的，因为它击败了CSS特异性的点。当你有5个班级都在同一个属性上声明'！important'时，你如何发现你的理智？我只使用'！important'作为最后的手段，或者在处理其他noobs可怕的css和它的唯一方法，使其工作而不重写整个图书馆 – TetraDev 2017-08-16 17:22:11

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

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

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

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

来源

2012-07-20 04:26:00 smilledge

Thankyou！ :)你出于好奇使用了什么浏览器？在safari上运行，将测试firefox – 2012-07-20 05:43:22

我使用最新版本的Chrome，Firefox，Safari和IE进行了测试。每个人都得到相同的结果。 – smilledge 2012-07-20 05:53:07

此行为只适用于浏览器并且是必需的。请参阅我的答案以供参考。 – BoltClock 2012-07-20 14:30:55

CSS类重复以增加特异性

回答

相关问题