提高 CSS 特异性的最高效的方式是啥？
Posted
技术标签:
【中文标题】提高 CSS 特异性的最高效的方式是啥？【英文标题】：What is the most character-efficient way to increase CSS specificity?提高 CSS 特异性的最高效的方式是什么？ 【发布时间】：2013-10-24 08:14:55 【问题描述】：如果我想增加规则的 CSS 特异性，我倾向于使用html 作为前缀，但我想知道是否有更简洁的方法可以做到这一点？
（这似乎是一个微不足道的问题，但在我的样式表定义响应式网格的过程中，将特异性前缀减少一个字符将节省几百字节）
【问题讨论】：
你为什么要打扰html ？样式是否被覆盖？如果他们使用相同的选择器，为什么不在其他样式表之后包含该样式表
定义“字符效率”。然后告诉我们为什么它很重要。
@EJP 所说的字符效率是指使用尽可能少的字符，我已经解释了好处是什么
@Smokeyphp 好电话 - 我在发布后不久意识到 2 个样式表的顺序很愚蠢，现在它可以工作而不必担心具体性。虽然我仍然很想知道html 是否可以改进
【参考方案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 中所述：
注意：允许重复出现相同的简单选择器并且确实会增加特异性。
【讨论】：
+1 - 在大多数情况下，文件大小会比前缀html 更大，但同样是一个巧妙的小技巧
不确定该链接是否以任何方式相关。这里每条规则只有一个选择器，所以从右到左没有什么可读取的。此外，如果您要链接到另一个 Stack Overflow 答案，just link directly to the answer。
我从研究中找到了这个链接，但没有参考任何 SO 答案。如果我能建立一个答案，我肯定会把答案联系起来。
@Nathan Lee：我是说那篇文章本身链接到 SO，所以不是链接到文章，而是链接到该文章链接到的答案，让每个人都毫无意义额外的点击。
是的@BoltClock。事实上，我在 SO 中读到了同样的内容，但回去看看他们是否有任何其他信息，然后继续从我获得链接的地方链接它。如果下次遇到任何此类类似情况，应直接链接到 SO。谢谢。值得一提。【参考方案2】：
最少字节，但具体多少？
在我看来，对于选择器，在大多数情况下，你不能得到任何短于两个字符加上空格的字符，特别是如果我们正在谈论添加特异性的“全局”使用（这似乎是因为你使用html)。因此，为了节省 CSS，您需要在 html 上使用单个字符 id。我会说一个 id （而不是一个类），因为你想保持它的唯一性。所以你在 html 中像这样实现：
<html id="A">
这允许在 CSS 中添加尽可能短的选择器：
#A .whateverYour [OriginalSelector] string .was
然后使用 James Donnelly 所说的（顺便说一下，我从来不知道相同选择器的重复），您可以使用最少的字符不断添加越来越多的特异性，如下所示：
#A#A#A .whateverYour [OriginalSelector] string .was
免责声明
按照我的回答，我不建议这一定是做 CSS 的好方法，也不是处理特殊性问题的好方法。但我确实相信，将短的一个字符 id 添加到 html 元素是可以用来增加任何选择器的特异性的最少字节数，这回答了这里的问题。
【讨论】：
+1 很好的答案，但这也让我意识到我真正想要回答的问题是如何少量增加特异性。使用类而不是 id 会有所帮助（但也会更容易受到其他地方使用的类的影响）。尽管这确实回答了最初的问题，但我不会纯粹将其标记为答案，因为正如您所说，实际使用它是一个坏主意，我根本不想推广它。 @wheresrhys：也许你应该改变你的问题。另外，我不想将其标记为答案有点困惑，因为“实际使用它是一个坏主意，我根本不想推广它”，而我的答案是 完全相同的事情 （除了特异性差异之外）您已经在使用html 加法，只少了两个字符（这是您要解决的原始问题）。因此，对于您提出的有关如何做的问题，不想宣传您已经在做的事情似乎很奇怪。
简单地说，如果它旁边有一个绿色的勾号，人们可能不会阅读所有的警告，而是继续使用你自己说的，不是你推荐的东西。
@wheresrhys：我明白这一点。那么这让我想知道，你是否应该删除整个问题，因为整个前提是错误的？
我认为不是，因为这是一个有效的问题，可以确定是否可以更有效地提高特异性，并且您的答案和另一个答案都可能有有效的用例。还有一些人为这个问题加注了星标，所以我会听从人群【参考方案3】：
我见过一个 postcss 库使用 :not(#\9)，它很短，增加了 1 的特异性，并且基本上适用于所有东西。不适用于 ie8 或更低版本，但来吧，这是 2020 年
【讨论】：
谢谢！这是一个很好的答案，因为它不需要额外的设置。 +1！\9 是什么意思？
不知道 ? ASCII 9？
实际上是ascii 9，它是一个以上是关于提高 CSS 特异性的最高效的方式是啥？的主要内容，如果未能解决你的问题，请参考以下文章