新的CSS 伪类函数 :is() 和 :where()示例详解

下面是针对“新的CSS 伪类函数 :is() 和 :where()示例详解”的完整攻略：

介绍

在 CSS Level 4 规范中，我们看到了两个新的伪类函数，它们是 :is() 和 :where() ，它们都可以用于过滤选择器，以简化 CSS 选择器的代码。

这两个伪类函数都可以将一个或多个选择器作为参数，并返回与这些选择器匹配的所有元素。

:is() 伪类

:is() 伪类选择器的作用相当于简化并列选择器的语法，将多个选择器组合为一个选择器。例如，以下选择器将选中所有段落和标题元素：

p, h1, h2, h3, h4, h5, h6 {
  color:red;
}

可以用 :is() 伪类简化为：

:is(p,h1,h2,h3,h4,h5,h6) {
  color:red;
}

这样可以减少重复的代码和提高可读性，还可以使代码更加简洁。

:where() 伪类

:where() 伪类选择器的作用与 :is() 相似，但是它只是一个容器，它不会对选择器应用特殊的规则。它通常与其它伪类一起使用，例如 :not() 。它也可以简化并列选择器的语法。

例如，以下选择器将选中所有段落和标题元素中的第一个元素：

p:first-of-type, h1:first-of-type, h2:first-of-type, h3:first-of-type, h4:first-of-type, h5:first-of-type, h6:first-of-type {
  color: red;
}

可以使用 :where() 伪类简化为：

:where(p, h1, h2, h3, h4, h5, h6):first-of-type {
  color: red;
}

这样同样可以减少重复的代码和提高可读性，还可以使代码更加简洁。

示例

以下是两个示例，展示了如何使用 :is() 和 :where() 这两个新的伪类函数：

示例一：使用 :is() 伪类

以下代码将会选中所有段落和 H2 标题元素：

:is(p, h2) {
  color: red;
}

这只有一行代码，而且非常容易阅读和理解。

示例二：使用 :where() 伪类

以下代码将会选中所有三个类别的元素中的最后一个：

.where {
  :where(section, nav, aside) :last-child {
    border-bottom: 5px solid black;
  }
}

使用 :where() 可以使代码更加简洁，而且可读性更高。

结论

:is() 和 :where() 伪类函数是一些非常有用的工具，它们可以使代码更加简洁，并提高可读性。尽管这两个伪类函数仍处于 CSS Level 4 规范的草案阶段，但是它们已经实现在许多现代的浏览器中使用。如果您想使 CSS 代码更加高效且缩短您的开发时间，那么 :is() 和 :where() 伪类函数就是您需要的工具。