我们可以用新的 CSS :is() 伪类实现我们用逗号分隔的查询无法实现的任何东西吗？答案

【问题标题】：Can we achieve anything with the new CSS :is() pseudo-class that we can't already achieve with comma-separated queries?我们可以用新的 CSS :is() 伪类实现我们用逗号分隔的查询无法实现的任何东西吗？
【发布时间】：2021-09-23 16:14:44
【问题描述】：

我一直在阅读 CSS Selectors Level 4 中的新 pseudo-classes。

伪类:is() 立即引起了我的注意，但在短暂的热情之后……我突然不确定它是否引入了任何新功能。

在A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors 中，Stephanie Eckles 介绍了几个用例，包括：

:is(-ua-invalid, article, p)
:is(#id, p)
:is(p, a)
:is(h1, h2, h3)
:is(h2, h3):not(:first-child)
p:is(article > *)

看起来不错，但是……这些不只是别名：

-ua-invalid, article, p
#id, p
p, a
h1, h2, h3
h2:not(:first-child), h3:not(:first-child)
article > p

除了上面的第五条之外，逗号分隔的选择器列表实际上比:is() 伪类更短（并且可能更有效）语法...主要是因为 :is() 函数只是用于将该列表（已经表示有效语法）括在括号中。

我错过了什么吗？您是否可以使用 :is() 做一些更聪明的事情，从而留下以逗号分隔的 CSS 选择器列表？

【问题讨论】：

不，他们不是。请考虑选择器的特异性。
啊哈。是的。这是一个重要的考虑因素。谢谢你，@戴。
特异性规则实际上是一个相对较新的决定，经过深思熟虑 1) 使用匹配元素的最具体参数的特异性，以及 2) 使用最具体的论点，句号。因此:is(#id, p) 的特殊性总是等于#id，即使一个元素只匹配类型选择器。
@BoltClock - 我明白了。我发现了hacks的机会！
@Rounin：你明白了 :)

标签： css css-selectors pseudo-class

【解决方案1】：

您实际上是在处理基本示例，但考虑更复杂的示例，如下所示：

.box h1, .box h2, .box h3, .box h4

为了避免重复我们使用的.box

.box :is(h1, h2, h3, h4)

据我所知，这是:is() 的主要动机：避免规则重复。

另一个常见的例子是表格选择器：

table tr td, table tr th

现在会变成

table tr :is(td, th)

【讨论】：

是的。好的。因此，它几乎是逗号分隔的复合选择器列表的“速记”。如果这意味着具有大量（否则不可避免）重复的样式表可能会被显着缩小，我想这不是可以忽略不计的。
@Rounin 是的，如果你有时间搜索 W3C 讨论，你会发现他们专门为此引入了这样的选择器（可能还有其他我错过的东西）