您现在的位置是：网站首页> 编程资料编程资料

CSS新增的:where和:is伪类函数是什么详解css3中的伪类before和after常见用法CSS伪类:empty让我眼前一亮(实例代码)浅谈CSS 伪元素&伪类的妙用CSS 伪类修改input选中样式的示例代码css伪类右下角点击出现对号角标表示选中的示例代码css选择器四大类：基本、组合、属性、伪类详解如何使用CSS3中的结构伪类选择器和伪元素选择器解决移动端跳转问题(CSS过渡、target伪类)css3 伪类选择器快速复习小结

2023-10-16 444人已围观

简介这篇文章主要介绍了CSS新增的:where和:is伪类函数是什么的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

:is() 和 :where() 都是伪类函数，可以帮助缩短和停止创建选择器时的重复。它们都接受选择器的参数数组（id，类，标签等），并选择可以在该列表中选择的任何元素。

这对如何帮助我们编写更短的选择器可能没有多大意义，所以让我们尝试使用 :where() 和 :is() 。

:where() 可以帮助我们解决类似这样的问题

 .btn span > a:hover, #header span > a:hover, #footer span > a:hover { ...; }

变成这样的东西

 :where(.btn, #header, #footer) span > a:hover { ...; }

和 :is() 可以帮助将相同的示例添加到该示例中

 is(.btn, #header, #footer) span > a:hover { ...; }

:where() 和 :is() 看起来和功能都是一样的，但是它们之间有一个区别要记住，那就是它们有不同的特殊性。:where() 是简单的，其特异性总是为 0，而 :is() 的特异性为最强的选择器。

在 CSS 中有四个层次的特异性层次。每一个级别或类别都有不同的分数，我们可以将所有的分数相加来计算选择器的特异性。

哪个选择器的数量最多，哪个元素的样式就会被应用到该元素上，这就是为什么有时当你写 CSS 时，你的样式不会被应用，会在开发工具中显示为划线。

特异性等级评分

例如

 button.btn { color: red; } .btn { color: green; }

 .btn = 10 button.btn = 1 + 10 = 11