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

fox/ 2023年08月17日/ CSS教程/ 浏览 743

: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() 写成这样,这样,这段代码是不是看起来干净多了?

发表评论

暂无评论,抢个沙发...

客服 工单