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

问题描述

我一直在阅读 CSS Selectors Level 4 中的新伪类。

伪类 :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,p
• #id,p
• p,a
• h1,h3
• h2:not(:first-child),h3:not(:first-child)
• article > p

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

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

解决方法

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

.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)