新的 CSS 函数式伪类选择器 :is() 和 :where()

这些看似微小的 CSS 选择器语法添加将产生重大影响。

在编写 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 时,它们为您提供了一种在选择器的中间、开头或结尾将元素分组在一起的方法。它们还可以更改特异性,使您有权取消或增加特异性。

选择器分组

关于分组,: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() 一起使用

要复习选择器,请查看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 WinklerUnsplash 上提供