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

浏览器支持

  • 88
  • 88
  • 78
  • 14

来源

:where()

浏览器支持

  • 88
  • 88
  • 78
  • 14

来源

认识:is()和:where()

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

选择器分组

:is() 可用于分组的任何操作，:where() 也一样。这包括在选择器中的任何位置使用它们，以及嵌套和堆叠它们。您熟悉和喜爱的全方位 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() 搭配使用

如需复习一下选择器，请参阅“学习 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() 差异很大。如需回顾特异性，请参阅“学习 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 网站