以编程方式设置 CSS 选择器特异性

Question

是否可以设置 CSS 选择器的特异性，而不是仅由包含它的选择器的计数决定？即，如果我有两个这样的选择器（显示计算的特异性）：

UL OL LI        /* a=0 b=0 c=3 -> specificity =   3 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */

（示例来自 https://www.w3.org/TR/selectors/#specificity）

有什么方法可以将第一个示例更改为这样，以便均衡两个选择器的特异性并且无需添加任意 class 选择器来这样做：

UL OL LI        /* a=0 b=1 c=3 -> specificity =   13 */

-或-

UL OL LI.red    /* a=0 b=0 c=3 -> specificity =  3 */

Answer 1

选择器的特殊性仅由其组件简单选择器（和伪元素，如果有的话）决定。您不能在不改变选择器本身的情况下改变选择器的特殊性。

如果您担心更改选择器（或其潜在匹配集）的含义，可以添加某些虚拟简单选择器，同时保持语义完整。在您的示例中，您可以增加 UL OL LI 的特异性以匹配 UL OL LI.red 而无需通过在选择器（带有后代组合器）或将 :nth-child(n) 添加到三种类型选择器中的任何一个 - 两者都是保证匹配，伪 classes 同样特定于 class 选择器。

另请参阅我对以下问题的回答以获得更多选项：

CSS class repetition to increase specificity

没有类似的方法来减少选择器的特异性，但是，无论是通过编程还是通过改变选择器（当然除了删除冗余选择器，如上述不合格的:root、:nth-child(n) 或重复的 type/class 选择器）。

以编程方式设置 CSS 选择器特异性

Programmatically set CSS selector specificity

css

css-selectors

css-specificity