CSS :where 和 :is 伪类函数是什么?
前端全栈开发者
共 1486字,需浏览 3分钟
· 2021-04-14
什么是 :is 与 :where?
:is()
和 :where()
都是伪类函数,可以帮助缩短和停止创建选择器时的重复。它们都接受选择器的参数数组(id,类,标签等),并选择可以在该列表中选择的任何元素。
这对如何帮助我们编写更短的选择器可能没有多大意义,所以让我们尝试使用 :where()
和 :is()
。
如何使用 :is 与 :where?
: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 {
...
}
:is 与 :where 和有什么不一样?
:where()
和 :is()
看起来和功能都是一样的,但是它们之间有一个区别要记住,那就是它们有不同的特殊性。:where()
是简单的,其特异性总是为0,而 :is()
的特异性为最强的选择器。
什么是CSS特异性(简而言之)?
在CSS中有四个层次的特异性层次。每一个级别或类别都有不同的分数,我们可以将所有的分数相加来计算选择器的特异性。
哪个选择器的数量最多,哪个元素的样式就会被应用到该元素上,这就是为什么有时当你写CSS时,你的样式不会被应用,会在开发工具中显示为划线。
特异性等级评分
ID——特异性得分为 100
内联样式——特异性得分为 1000
元素和伪类——特异性得分为 1
类、伪类和属性——特异性得分为 10
例如
button.btn {
color: red;
}
.btn {
color: green;
}
.btn
= 10
button.btn
= 1 + 10 = 11
如果我们把 .btn
类放在 <button>
标签上,文字就会变成红色,因为 button.btn
选择器的分数高于 .btn
选择器。
正如你所看到的,有两种不同的专属性级别的伪类,这是因为不同的伪类可能具有不同的专属性,这取决于你使用的伪类以及如何使用它们。
粉丝福利
最近文章
WebStorm访谈:我们是如何构建 JavaScript IDE 的? 面向对象编程是计算机科学的最大错误 13个顶级免费所见即所得文本编辑器工具Python和JavaScript——这两种流行的编程语言之间的主要区别是什么? 编程日历小程序,对小程序云开发和生成海报的实践 一个付费 chrome 插件的一生
评论
知乎热议:博士生最好的状态是什么?
链接:https://www.zhihu.com/question/447412618编辑:深度学习与计算机视觉声明:仅做学术分享,侵删作者:JackieLeehttps://www.zhihu.com/question/447412618/answer/2963078772最好状态比较难说,最开心
机器学习初学者
0
自动化测试做得好的标准是什么
自动化测试要做得好的标准,主要包括以下几个方面:一、高覆盖率与精准定位1、测试用例覆盖全面:自动化测试应覆盖产品的核心功能、关键业务流程以及常见的异常场景,确保测试范围广泛,降低遗漏风险。2、问题定位准确:自动化测试应能够精准地识别并定位问题,包括缺陷的位置、产生的原因以及可能的影响,为开发团队提供
测试开发社区
0
Open-Sora全面开源升级:支持16s视频生成和720p分辨率
机器之心发布 机器之心编辑部Open-Sora 在开源社区悄悄更新了,现在单镜头支持长达16秒的视频生成,分辨率最高可达720p,并且可以处理任何宽高比的文本到图像、文本到视频、图像到视频、视频到视频和无限长视频的生成需求。我们来试试效果。生成个横屏圣诞雪景,发b站再生成个竖屏,发抖音还能
机器学习算法与Python实战
0
文本嵌入、文本分类和语义搜索
在实践中使用大型语言模型(LLM)中,RAG 的一个关键部分是使用文本嵌入从知识库中自动检索相关信息。在这里,我将更深入地讨论文本嵌入,并分享两个简单(但功能强大)的应用:文本分类和语义搜索。ChatGPT 吸引了全世界对人工智能及其潜力的想象。ChatGPT 的聊天界面是这一影响的关键因素,它使人
大邓和他的Python
0
一站式解决方案:基于 Arthas 实现服务发现和权限控制
来源:juejin.cn/post/7281849496983994383👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接
小哈学Java
0
顶级 Javaer 都在用的 20 个类库,真香!
点击关注公众号,Java 干货及时推送↓推荐阅读:投了 100 多份简历后…优秀且经验丰富的Java开发人员的特征之一是对API的广泛了解,包括JDK和第三方库。我花了很多时间来学习API,尤其是在阅读了Effective Java 3rd Edition之后 ,Joshua Bloch建
Java技术栈
1
互联网晚报 | 大麦网已退款凤凰传奇演唱会“柱子票”;钟薛高再成被执行人;iPhone 16或取消实体音量键和电源键
大麦网回应凤凰传奇演唱会买到“柱子票”:已退票退款据报道,凤凰传奇2024巡回演唱会常州站演出结束的第二天,有网友称自己在大麦网买到“柱子票”,因为观看效果不佳,要求退款被拒。23日,记者从涉事网友处了解到,大麦方面给出了退款建议,但被其拒绝,“我希望平台退款加赔偿,并重视屡次出现的‘柱子票’问题。
产品刘
0
面试官:在原生input上面使用v-model和组件上面使用有什么区别?
前言面试官:vue3的v-model都用过吧,来讲讲。粉丝:v-model其实就是一个语法糖,在编译时v-model会被编译成:modelValue属性和@update:modelValue事件。一般在子组件中定义一个名为modelValue的props来接收父组件v-model传递的值,然后当子组
高级前端进阶
0