浅析CSS :is() 和 :where() 即将出现在浏览器中

概述

在CSS4 Selector Level 4 规范中， :is() 和 :where() 伪类将被正式引入到浏览器中。这两个伪类都可以用来简化CSS选择器的书写，提高选择器的复用性。其中，:is() 和 :where() 功能类似，但也有细微差异。

:is() 伪类

对于复杂的选择器，我们经常需要嵌套或者使用逗号分隔不同的选择器。 :is() 可以让我们使用更简洁的方式书写这样的选择器。例如，下面的选择器：

div p,
div span,
div a {
  color: red;
}

可以简化为：

div :is(p, span, a) {
  color: red;
}

这样可以有效减少代码量，提高可读性。:is() 还支持嵌套使用，例如：

:is(div, article) > :is(h1, h2, h3) {
  color: blue;
}

这样可以选中 div.article 和 article 标签的 h1、h2、h3 标签，其它选择器同理。

:where() 伪类

:where() 功能与 :is() 相似，不过它允许我们在选择器中使用普通的语法结构，而非只能使用逗号分隔的方式。例如，下面的选择器：

div p b,
div ul li b,
div ol li b {
  color: red;
}

可以简化为：

div :where(p, ul li, ol li) b {
  color: red;
}

其中，普通的语法结构“ul li”、“ol li”都被包含在了 :where() 伪类中。:where() 可以用于任何复杂选择器的简化，例如：

:where(.red, .blue):not(.green) h1 a {
  color: red;
  text-decoration: none;
}

这样可以选中具有“red”或“blue”类的 h1 标签中的 a 标签，且不含有“green”类。

注意事项

虽然 :is() 和 :where() 看起来非常有用，但是目前这两个伪类还未被所有浏览器所支持，需要注意浏览器的版本兼容性。同时，需要注意书写格式， :is() 和 :where() 必须放在伪类列表的最后。例如：

h1:where(:first-child, :last-child):not(.title) {
  color: red;
}

示例

下面是一个选择器的示例，展示了如何使用 :is() 和 :where() 来简化选择器。

div :is(p, ul li, ol li):where(:first-child, :last-child) b {
  color: red;
}

这样可以选中 div 中的 p、ul li、ol li 标签中的第一个或者最后一个 b 标签，并将其颜色设置为红色。

另一个示例：

:is(article, div) :where(.title, h1) a {
  color: blue;
}

这样可以选中 article 和 div 标签中具有“title”类或者为 h1 标签的 a 标签，并将其颜色设置为蓝色。