Question

如果我想提高规则的CSS特异性，我倾向于以html为前缀，但我想知道是否有更简洁的方法来做到这一点？

（这似乎是一个微不足道的问题，但在定义响应网格的样式表中，通过单个字符减少特异性前缀可以节省几百个字节）

Answer 1

这实际上取决于你想要实现的目标。提高特异性的廉价方法是简单地重复选择器。例如，如果这是你的标记：

<figure id="myId" class="myClass"></figure>

这是你的CSS：

#myId.myClass { color:red; font-weight:bold; }      /* Specificity: 110 */

您可以简单地重复class或id选择器，而无需修改标记：

#myId.myClass.myClass { color:green; }              /* Specificity: 120 */
#myId#myId { font-weight:normal; }                  /* Specificity: 200 */

JSFiddle demo

这是完全有效的，因为W3C选择器级别3建议书在其Calculating Specificity section中说明：

注意：允许重复出现相同的简单选择器，并提高特异性。

Answer 2

最少字节，但具体多少？

在我看来，对于选择器，在大多数情况下，你不能得到任何短于两个字符加上空格，特别是如果我们谈论添加特异性的“全局”使用（这似乎是你使用以来的情况） html）。因此，为了节省CSS，您需要html上的单个字符ID。我会说一个id（而不是一个类），因为你想保持它的独特性。所以你在html中实现如此：

<html id="A">

然后允许在CSS中添加最短的选择器：

#A .whateverYour [OriginalSelector] string .was {}

然后使用詹姆斯·唐纳利所说的（顺便说一下，我从来不知道重复相同的选择器），你可以用最少量的字符不断增加更多和更多的特性：

#A#A#A .whateverYour [OriginalSelector] string .was {}

<强>声明

通过回答，我不建议这一定是做CSS的好方法，也不是处理特异性问题的好方法。但我确实认为在html元素中添加短的一个字符id是可以用来增加任何选择器的特异性的最少字节数，这可以回答这里的问题。

Answer 3

我已经看到postcss库使用:not(#\9)，它很短，将特异性提高了一个，并且基本上可以处理所有事情。不适用于ie8或以下版本，但是现在是2020年

增加CSS特异性的最有效的方法是什么？

3 个答案:

最少字节，但具体多少？