以编程方式设置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的例子）

是否有任何方法可以将第一个示例更改为此，以便均衡两个选择器的特异性，而无需添加任意类选择器来执行此操作：

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

-OR -

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

Answer 1

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

如果您担心更改选择器（或其潜在匹配项集）的含义，则可以添加某些虚拟简单选择器，同时保持语义不变。在您的示例中，您可以通过在选择器的开头添加非限定UL OL LI来增加UL OL LI.red与:root匹配的特异性而不实际依赖任意类名称一个后代组合子）或将:nth-child(n)添加到三个类型选择器中的任何一个 - 两者都是保证匹配，伪类同样特定于类选择器。

另请参阅以下问题的答案以获取更多选项：

• Can type selectors be repeated to increase specificity?
• CSS class repetition to increase specificity

没有类似于降低选择器特异性的方法，但是，无论是以编程方式还是通过改变选择器（当然除去冗余选择器，如前面提到的不合格:root，{{1或重复的类型/类选择器）。