如果我想增加规则的 CSS 特异性,我倾向于使用前缀html
,但我想知道是否有更简洁的方法可以做到这一点?
(这似乎是一个微不足道的问题,但在我的样式表定义响应式网格的过程中,将特异性前缀减少一个字符将节省几百字节)
如果我想增加规则的 CSS 特异性,我倾向于使用前缀html
,但我想知道是否有更简洁的方法可以做到这一点?
(这似乎是一个微不足道的问题,但在我的样式表定义响应式网格的过程中,将特异性前缀减少一个字符将节省几百字节)
这实际上取决于您要实现的目标。一种增加特异性的廉价方法是简单地重复选择器。例如,如果这是您的标记:
<figure id="myId" class="myClass"></figure>
这是你的 CSS:
#myId.myClass { color:red; font-weight:bold; } /* Specificity: 110 */
您可以简单地重复class
orid
选择器而不修改您的标记:
#myId.myClass.myClass { color:green; } /* Specificity: 120 */
#myId#myId { font-weight:normal; } /* Specificity: 200 */
这是完全有效的,正如 W3C Selectors Level 3 Recommendation 在其计算特异性部分所述:
注意:允许重复出现相同的简单选择器并且确实增加了特异性。
在我看来,对于选择器,在大多数情况下,您不能得到任何短于两个字符加上空格的字符,特别是如果我们正在谈论添加特异性的“全局”使用(自从您使用 以来似乎就是这种情况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 是可以用来增加任何选择器的特异性的最少字节数,这回答了这里的问题。
我见过一个 postcss 库的使用:not(#\9)
,它很短,增加了一个特异性,并且基本上适用于所有东西。不适用于 ie8 或更低版本,但来吧,这是 2020 年