新增了 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