CSS新增的:where和:is伪类函数是什么-CSS
作者:一号香久山日氵冥 | 来源:互联网 | 2023-02-01 10:50
CSS新增的:where和:is伪类函数是什么是千自学中一篇关于CSS的文章简介:CSS新增的:where和:is伪类函数是什么什么是:is与:where? :is() 和:where() 都是伪类函数,可以帮助缩短和停止创建选择器时的重复。它们都接受选择器的参数数组(id,类
CSS新增的:where和:is伪类函数是什么
什么是 :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
类放在
推荐阅读
-
本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法,包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ...
[详细]
蜡笔小新 2023-12-10 20:09:23
-
在做项目的过程中,我们时常需要进行一些弹框操作,比如在后台管理时需要进行的一些增删改操作,这个时候我们需要使用到弹框,或者在 ...
[详细]
蜡笔小新 2023-10-14 08:49:35
-
-
本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ...
[详细]
蜡笔小新 2023-12-14 14:37:52
-
篇首语:本文由编程笔记#小编为大家整理,主要介绍了计网-局域网:NAT是如何工作的?相关的知识,希望对你有一定的参考价值。 ...
[详细]
蜡笔小新 2023-12-13 13:04:08
-
导出功能protectedvoidbtnExport(objectsender,EventArgse){用来打开下载窗口stringfileName中 ...
[详细]
蜡笔小新 2023-12-12 14:34:29
-
本文介绍了响应式页面的概念和实现方式,包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点,提出了选择方案的建议。同时,对于响应式页面的需求和背景进行了讨论,解释了为什么需要响应式页面。 ...
[详细]
蜡笔小新 2023-12-11 12:37:10
-
本文介绍了一种在PHP中对二维数组根据某个字段进行排序的方法,以年龄字段为例,按照倒序的方式进行排序,并给出了具体的代码实现。 ...
[详细]
蜡笔小新 2023-12-11 10:56:01
-
本文详细解答了如何在php文件中添加图片的问题,包括插入图片的代码、使用PHPword在载入模板中插入图片的方法,以及使用gd库生成不同类型的图像文件的示例。同时还介绍了如何生成一个正方形文件的步骤。希望对大家有所帮助。 ...
[详细]
蜡笔小新 2023-12-11 10:46:38
-
本文介绍了在HTML中实现表格的页眉页脚布局的解决方案。通过基本的HTML/CSS技术,避免使用内联样式和固定定位,实现了一个标准的页眉页脚布局。提供了一个替代的解决方案,为读者提供了参考。 ...
[详细]
蜡笔小新 2023-12-10 15:50:47
-
<!DOCTYPEhtml><htmllang=en><head><metacharset=UT ...
[详细]
蜡笔小新 2023-10-16 06:20:19
-
大家好,我是致力于前端开发,前端设计,前端入门的前端小姐姐,今天为大家带来的前端新知识是【雪碧图和滑动门】,不 ...
[详细]
蜡笔小新 2023-10-15 17:45:23
-
本地要用localhost。发布之后要用https的才可以看到。(你的设备也必须有摄像头)切记卡号 ...
[详细]
蜡笔小新 2023-10-14 10:22:56
-
以下图片及代码均来自京东云点击这里进入京东云思路和效果图:background-position:00可以用js动态的将长图按帧数一帧一阵的展示出来效果类似gif,红框就是可视界面 ...
[详细]
蜡笔小新 2023-10-13 20:42:47
-
Tooltips效果,鼠标经过显示提示 ...
[详细]
蜡笔小新 2023-10-13 13:52:29
-
css自适应字体样式?如果是一排文字,一个background‘red’;就搞定了。是多行的话,只有根据文字行高,用一张背景图横向重复。css样式自适应分辨率高度和宽度尽量使用百分 ...
[详细]
蜡笔小新 2023-10-13 13:39:50
-