CSS :where() 伪类介绍

CSS :where() 伪类是一个结合了多个CSS选择器的伪类，可以在其中定义一组匹配规则，同时可以通过逗号隔开多组匹配规则。

这个伪类主要用于简化CSS样式表中的规则书写。对于输入复杂的选择器，可能会导致选择器的可读性变差，而在使用 :where() 伪类时，可以将复杂的选择器写在 :where() 块内，并用逗号隔开新的选择器规则，从而增加代码的可读性。

语法

:where(selector1, selector2, ...) { /* 定义选择器规则 */ }

在 :where() 块内部，可以定义一组由逗号隔开的多个选择器规则，它们将会被统一应用到一个父元素上。

例子

下面是一个使用 :where() 伪类的例子:

/* 给所有的段落元素添加红色边框 */
:where(p, h1, h2, h3) {
  border: 1px solid red;
}

在上面这个例子中，我们利用了 :where() 伪类来定义多个选择器规则。所有在 :where() 块内的选择器规则，都会被统一作用到相应的元素上。在这个例子中，我们选择了所有 p, h1, h2, h3 元素，然后为它们添加了红色的边框。

总结

CSS :where() 伪类提供了一种简单的方式，可以将多个选择器规则组合在一起，从而增加代码的可读性。使用这个伪类时，需要注意选择器规则的顺序，因为匹配到第一个选择器规则的元素，就会应用该选择器规则所设置的样式。