新增了 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。
  • 边缘：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() 搭配使用

要回顾选择器，请参阅“学习”页面上的“选择器”单元 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，来源：Unspin