新增了 CSS 函数伪类选择器 :is() 和 :where()

这些看似微不足道的 CSS 选择器语法增补将产生巨大影响。

Adam Argyle

编写 CSS 时，您有时会使用长长的选择器列表来定位具有相同样式规则的多个元素。例如，如果您想调整标题元素中找到的所有 <b> 标记的颜色，可以编写以下代码：

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

不过，您可以使用 :is() 来提高易读性，同时避免使用长选择器：

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

可读性和更短的选择器便捷性只是 :is() 和 :where() 为 CSS 带来的价值的一小部分。在本文中，您将了解这两个功能伪类选择器的语法和价值。

展示使用 :is() 前后效果的无限视觉效果

浏览器兼容性

:is()

浏览器支持

  • Chrome：88。
  • Edge：88.
  • Firefox：78.
  • Safari：14。

来源

:where()

浏览器支持

  • Chrome：88。
  • Edge：88.
  • Firefox：78.
  • Safari：14。

来源

认识 :is() 和 :where()

这些是功能伪类选择器，请注意末尾的 () 以及它们以 : 开头的方式。可以将这些视为与元素匹配的运行时动态函数调用。在编写 CSS 时，它们可让您在选择器的中间、开头或结尾将元素分组在一起。它们还可以更改特定性，让您可以使特定性失效或提高特定性。

选择器分组

:where() 可以执行 :is() 在分组方面可以执行的任何操作。这包括在选择器的任何位置使用、嵌套和堆叠它们。您熟悉且喜爱的完整 CSS 灵活性。以下是一些示例：

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

上述每个选择器示例都展示了这两个功能伪类的灵活性。如需查找可以通过 :is() 或 :where() 改进的代码区域，请查找包含多个英文逗号和重复选择器的选择器。

将简单和复杂选择器与 :is() 搭配使用

如需回顾选择器，请参阅 Learn CSS 中的选择器模块。下面列举了一些简单和复杂选择器的示例，以帮助说明此功能：

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

到目前为止，:is() 和 :where() 在语法上可以互换。现在，我们来看看它们之间的区别。

:is() 和 :where() 之间的区别

在具体性方面，:is() 和 :where() 差异很大。如需回顾专门介绍特异性的内容，请参阅 Learn CSS 中的“特异性”模块。

简而言之

  • :where() 没有任何特异性。
    :where() 会压缩作为函数参数传递的选择器列表中的所有特异性。这是首个此类选择器功能。
  • :is() 采用其最具体的选择器的针对性。
    :is(a,div,#id) 的 ID 针对性得分为 100 分。

当我对分组过于兴奋时，才会选择列表中特定性最高的选择器。我总是能够通过将高特异性的选择器移至自己的选择器（这样它的影响就不会那么大）来提高可读性。下面的示例说明了我的意思：

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

在 :where() 中，我期待看到库提供不具特异性的版本。作者样式和库样式之间的特定性竞争可能会结束。在编写 CSS 时，不会有任何特异性与之竞争。CSS 已经在开发这种分组功能很长一段时间了，现在它已经推出，但仍有很大一部分有待探索。尽情享受缩减样式表和移除英文逗号的乐趣。

照片由 Markus Winkler 拍摄，选自 Unsplash