如果我想增加规则的CSS特异性，我倾向于使用html作为前缀，但我想知道是否有更简洁的方法来做到这一点？(It这看起来似乎是一个微不足道的问题，但是在我的样式表定义响应网格的过程中，将特异性前缀减少一个字符将保存几百个字节）
html
vd8tlhqk1#
这实际上取决于你想要达到的目标。一个增加特异性的廉价方法是简单地重复一个选择符。例如，如果你的标记是：
<figure id="myId" class="myClass"></figure>
这是你的CSS：
#myId.myClass { color:red; font-weight:bold; } /* Specificity: 110 */
您可以简单地重复class或id选择器，而根本不修改标记：
class
id
#myId.myClass.myClass { color:green; } /* Specificity: 120 */ #myId#myId { font-weight:normal; } /* Specificity: 200 */
JSFiddle demo.这是完全有效的，正如W3C选择器3级建议在其计算特异性部分中所述：注：允许重复出现相同的简单选择符，这确实增加了特异性。
mkshixfv2#
在我看来，对于选择器，在大多数情况下，您不能得到比两个字符加上空格更短的字符，特别是如果我们讨论的是"全局"使用添加特定性（因为您使用的是html，所以似乎就是这种情况）。因此，为了节省CSS，您需要在html上使用一个字符id。（而不是类），因为你想保持它的唯一性。所以你在html中实现如下：
<html id="A">
这样就可以在CSS中添加最短的选择符：
#A .whateverYour [OriginalSelector] string .was {}
然后使用James Donnelly所说的（顺便说一句，我从来不知道同一个选择符的重复），你可以用最少的字符不断地添加越来越多的特定性，如下所示：
#A#A#A .whateverYour [OriginalSelector] string .was {}
我这样回答并不是说这是一种很好的CSS方法，也不是一种处理特殊性问题的好方法，但是我相信在html元素中添加一个短字符id是增加选择器特殊性所需的最少字节数，这就回答了这里的问题。
tcomlyy63#
我见过一个postcss库使用:not(#\9)，它很短，增加了一个特性，基本上可以在任何地方工作，不适用于ie8或更低版本，但这是2020年编辑：我意识到这增加了一个 ID 的特异性，这是一个重要的区分:not(.\9)将增加一个类，这可能是你大多数时候想要的。
:not(#\9)
:not(.\9)
qgelzfjb4#
我意识到我已经晚了，但是使用一个实际上不存在的ID选择器，比如“#dummy”，是目前为止提高CSS特异性的最有效的方法，应该使用:not和:is伪类。
:not
:is
即使HTML中不存在ID或类，也可以使用此方法！
这是一种非常有效的方法，可以极大地提高特异性，例如：
ul li:not(#dummy)
另一方面，一个不太具体的例子是：
ul :is(li)
这两个示例都比标准ul li选择器具有更高的特异性。要试验不同的选择器及其特异性，您可以使用特异性计算器，例如：Specificity Calculator
ul li
4条答案
按热度按时间vd8tlhqk1#
这实际上取决于你想要达到的目标。一个增加特异性的廉价方法是简单地重复一个选择符。例如，如果你的标记是：
这是你的CSS：
您可以简单地重复
class或id选择器，而根本不修改标记：JSFiddle demo.
这是完全有效的，正如W3C选择器3级建议在其计算特异性部分中所述：
注：允许重复出现相同的简单选择符，这确实增加了特异性。
mkshixfv2#
字节最少，但具体到什么程度？
在我看来，对于选择器，在大多数情况下，您不能得到比两个字符加上空格更短的字符，特别是如果我们讨论的是"全局"使用添加特定性（因为您使用的是
html，所以似乎就是这种情况）。因此，为了节省CSS，您需要在html上使用一个字符id。（而不是类），因为你想保持它的唯一性。所以你在html中实现如下：这样就可以在CSS中添加最短的选择符：
然后使用James Donnelly所说的（顺便说一句，我从来不知道同一个选择符的重复），你可以用最少的字符不断地添加越来越多的特定性，如下所示：
我这样回答并不是说这是一种很好的CSS方法，也不是一种处理特殊性问题的好方法，但是我相信在
html元素中添加一个短字符id是增加选择器特殊性所需的最少字节数，这就回答了这里的问题。tcomlyy63#
我见过一个postcss库使用
:not(#\9)，它很短，增加了一个特性，基本上可以在任何地方工作，不适用于ie8或更低版本，但这是2020年编辑：我意识到这增加了一个 ID 的特异性，这是一个重要的区分
:not(.\9)将增加一个类，这可能是你大多数时候想要的。qgelzfjb4#
我意识到我已经晚了，但是使用一个实际上不存在的ID选择器，比如“#dummy”，是目前为止提高CSS特异性的最有效的方法，应该使用
:not和:is伪类。即使HTML中不存在ID或类，也可以使用此方法！
这是一种非常有效的方法，可以极大地提高特异性，例如：
另一方面，一个不太具体的例子是：
这两个示例都比标准
ul li选择器具有更高的特异性。要试验不同的选择器及其特异性，您可以使用特异性计算器，例如：Specificity Calculator