如何在css中使用:where() 伪类函数对代码进行简化

:where() 是一个 CSS 伪类函数选择器,它接受一个选择器列表作为参数,并将给定的样 我们在样式编写中，当多个元素同时应用相同的样式规则时，我们通常会编写一长串以逗号分隔的选择器。

.zhuige-box div,
.zhuige-box .title,
.zhuige-box #article {
 color: red;
}

在上面的代码片段中，我们只选择了三个元素，但是如果有大量的元素和选择器，代码将开始看起来不整洁，并且可能变得难以阅读和理解,可读性不太友好。

这时，:where() 伪类就派上用场了。

:where() 伪类函数接受一个选择器列表作为其参数，并将选择所有可以通过选择器列表中的任何规则选择的元素。

这就是 :where()  伪类函数发挥作用的地方。

.zhugie-box :where(div, .title, #article) {
 color: red;
}

上面的代码可以使用 :where() 写成这样,这样，这段代码是不是看起来干净多了？