我们能否使用新的 CSS :is() 伪 class 实现我们无法通过逗号分隔查询实现的任何目标？

Question

我一直在阅读伪-classes CSS 选择器级别 4.

伪class :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() 伪 class 语法...主要是因为 :is() 函数只是用来将该列表（已经代表有效语法）括在括号中。

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

Answer 1

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

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

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

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

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

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

table tr td, table tr th

现在会变成

table tr :is(td, th)