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

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 */

这是完全有效的,因为W3C选择器级别3建议在其计算特性部分中指出:

注意:允许重复出现相同的简单选择器,并增加特异性.

Answer 2

我见过一个 postcss 库的使用:not(#\9)，它非常短，将特异性提高了 1，并且基本上适用于所有内容。不适用于 ie8 或更低版本，但拜托，这是 2020 年

编辑：我意识到这会增加一个ID的特异性，这是一个重要的区别，:not(.\9)会增加一个类，这可能是您大多数时候想要的。

Answer 3

最少字节,但更具体？

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

<html id="A">

然后,它允许CSS中最短的选择器添加:

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

然后使用James Donnelly所说的(顺便说一句,我从来不知道重复相同的选择器),你可以用最少量的字符不断增加更多和更多的特性:

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

放弃

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