深入了解 CSS 中的 :where() 和 :is() 函数-阿里云开发者社区
中国站联系我们ICP备案控制台登录/注册开发者社区
首页博文问答技术作品课程实验精品实践课免费场景实验AI实训平台高校实验室云起导师计划大赛数字创新赛学术前沿赛入门学习赛在线编程赛节目开发者评测局开源人说全部视频活动&社群飞天Club技术沙龙阿里云MVP镜像&工具镜像站数据集飞天加速计划天池Notebook云开发平台圈子热门ModelScope云上运维云原生数据库大数据AIoT云端一体云效DevOps平头哥钉钉开放平台全部技术圈云计算弹性计算存储服务云原生容器serverless中间件微服务可观测数据库云数据库PolarDB开源大数据大数据计算实时数仓Hologres实时计算FlinkE-MapReduceDataWorksElasticsearch人工智能机器学习平台PAI计算机视觉智能语音交互自然语言处理多模态模型pythonsdk通用模型开发与运维云效DevOps钉钉宜搭支持服务镜像站发布写文章提问题发视频发作品创作活动乘风者计划立即获得创作者权益，前往创作者中心积分商城个人中心登录后您可以获得免费学社区课程下载社区电子书参与活动得奖励评论/点赞/收藏立即登录乘风者计划创作者中心APP活动
首页个人中心登录后您可以获得加入子社区评论/点赞/收藏互动提问讨论参与专属活动立即登录我要加入
首页博文问答技术作品课程实验大赛节目活动&社群镜像&工具圈子
完成任务可领400 积分继续完成>
开发者社区>
游客mm3oox3r3c656>
正文
深入了解 CSS 中的 :where() 和 :is() 函数
2023-02-22
116
简介：
深入了解 CSS 中的 :where() 和 :is() 函数
+关注继续查看
深入了解 CSS 中的 :where() 和 :is() 函数:where() 函数接受一个选择器列表作为参数，允许你编写更少的代码并同时设置它们的样式。在本文中，我们将讨论 :where() 伪类函数，并演示如何在生产环境中使用它。我们将回顾与 :where() 函数相关的叠加、优先级和安全性。我们还将研究一些特定的用例，并讨论它与 :is() 函数的异同。1.什么是「:where() 函数？」根据 MDN，:where() 是一个 CSS 伪类函数选择器，它接受一个选择器列表作为参数，并将给定的样式应用于该列表中的任何元素，因此:where() 对于缩短一个较长的选择器列表非常有用。在 CSS 中，当多个元素同时应用相同的样式规则时，我们通常会编写一长串以逗号分隔的选择器。下面是一个例子，我们将相同的样式应用到 header、main 元素和 footer 元素中的所有 <a> 标签:header a:hover,
main a:hover,
footer a:hover {
color: green;
text-decoration: underline;
}在上面的代码片段中，我们只选择了三个元素，但是如果有大量的元素和选择器，代码将开始看起来不整洁，并且可能变得难以阅读和理解。这就是 :where() 伪类函数发挥作用的地方。下面是上面的例子使用 :where() 函数的样子：:where(header, main, footer) a:hover {
color: red;
text-decoration: underline;
}当浏览器到达该代码片段时，该代码指示浏览器查找 header、main 和 footer 选择器，并定位这些选择器中的所有 a 标签。然后，当用户将鼠标悬停在任何这些 a 标签上时，浏览器应该应用指定的样式，在本例中为红色和下划线。这个伪类函数使我们能够以更短、更容易理解的方式编写一个很长的选择器列表。2. 组合、分割和叠加 :where() 函数使用 :where() 函数，我们可以以多种方式和组合对元素进行分组。我们可以将 :where() 函数放在选择器的开头、中间或结尾。下面是一个有多个选择器和样式的例子：/* first list */
header a:hover,
main a:hover,
footer a:hover {
color: green;
text-decoration: underline;
/* second list */
article header > p,
article footer > p{
color: gray;
/* third list */
.dark-theme button,
.dark-theme a,
.dim-theme button,
.dim-theme a{
color: purple;
}下面是相同的代码，用 :where() 函数重写：/* first list */
/* at the beginning */
:where(header, main, footer) a:hover {
color: red;
text-decoration: underline;
/* second list */
/* in the middle */
article :where(header, footer) > p {
color: gray;
/* third list */
/* at the end */
.dark-theme :where(button, a) {
color: purple;
.dim-theme :where(button, a) {
color: purple;
}在第一个列表中，我们指定「红色」和「下划线」样式应应用于悬停时的 header、main 元素和 footer 元素。在第二个列表中，我们指定 article、header 和 footer 元素应该使用「灰色」样式。为了更清晰，我们将第三个列表分为两个 :where() 函数。在这个列表中，我们指定 .dark-theme、.dim-theme 里的 button 和 a 元素的样式应该是「紫色」。现在，我们将进一步减少第三个列表函数，将它们变成一个 :where() 函数：/* stacked */
:where(.dark-theme, .dim-theme) :where(button, a) {
color: purple;
}这种减少复杂选择器列表的策略称为叠加。3. :where() 选择器的优先级:where() 函数选择器的优先级总是零。因此，以该函数为目标的任何元素也会自动获得 0 的优先级。这使我们能够轻松地取消任何元素的样式。下面是一个 HTML 有序列表的例子：<div>
<h2>First list no class</h2>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
</ol>
</div>
<div>
<h2>Second list with class</h2>
<ol class="second-list">
<li>List Item 1</li>
<li>List Item 2</li>
</ol>
</div>
<div>
<h2>Third list with class</h2>
<ol class="third-list">
<li>List Item 1</li>
<li>List Item 2</li>
</ol>
</div>在上面的代码片段中，有三个有序列表，每个列表中有两个项。第二个和第三个列表有一个给定的类，而第一个列表没有。没有任何样式，我们可以看到每个列表是按数字顺序排列的：现在，让我们添加一些样式：:where(ol[class]) {
list-style-type: none;
}在上面的代码片段中，我们使用 :where() 伪类函数来选择应用了类的所有 ol 标签。下面，我们看到第二个和第三个列表，它们都有一个类，被 :where() 函数作为目标，并删除了它们的 list-style-type：现在，让我们添加一些额外的样式：:where(ol[class]) {
list-style-type: none;
.second-list {
list-style-type: disc;
}只针对使用类名的第二个列表，我们可以看到它现在显示为项目符号，而第三个列表仍然没有列表样式类型：你可能会想，“这不应该是这样吗，因为新的样式写在 :where() 函数样式下面？”不，它不是，我们一会儿就会看到。让我们看看当我们把刚刚添加的代码移到代码块的顶部，并把 :where() 函数部分移到底部时，会发生什么：.second-list {
list-style-type: disc;
:where(ol[class]) {
list-style-type: none;
}注意样式仍然没有改变：记住，:where() 函数的优先级为零。4. :where() 选择器的安全性对于选择器列表，如果浏览器不能识别列表中的一个选择器，则整个选择器列表将被视为无效，并且它们的样式将不会被应用。然而，对于 :where() 伪类函数就不是这样了。如果 :where() 函数中的元素是无效选择器的目标，则该元素将不会获得任何样式。其余的元素仍然会被设置样式。:where() 函数将跳过无效的选择器到下一个（有效）选择器。这就是为什么 :where() 被称为安全的选择器。在下面的例子中，:unsupported 对于许多浏览器来说是无效的选择器。下面的代码将被正确解析，并且仍然会匹配 :valid 选择器，即使在不支持 :unsupported 选择器的浏览器中，如下所示：:where(:valid, :unsupported) {
...
}然而，在不支持 :unsupported 选择器的浏览器中，以下代码将被忽略，即使它们支持 :valid 选择器：:valid, :unsupported {
...
}5. :where() 函数的特殊用例在一些特殊的用例中，:where() 函数可能是一个有用的工具，但也有一些情况下应该避免使用它。使用 :where() 伪类函数时出现的几乎所有问题都归结为优先级。因为 :where() 的优先级为零，我们需要非常小心地选择何时何地使用这个函数。首先，让我们看看几个用例，在这些用例中 :where() 可能特别有用。5.1 改进 CSS 重置CSS 重置是指在任何其他样式之前加载一组样式规则，以清除浏览器的内置样式。CSS 重置通常放置在 CSS 样式表的顶部或开始，所以它们首先加载。开发人员通常使用它们来删除浏览器最初给几个元素的默认样式，然后才开始实际设计他们的元素和网站。CSS 重置还可以帮助消除不同浏览器之间的不一致。CSS 重置是临时的样式，稍后会在样式化过程中更改。然而，根据 CSS 重置中使用的元素或元素组的选择器的简单性或复杂性，稍后在代码中可能很难覆盖初始样式。例如，假设我们将网站上的所有的 a 标签设置为「绿色」。然后，我们稍后决定将所有 header 里的 a 标签的样式设置为「灰色」。由于在 CSS 重置中选择的复杂性，新的（灰色）样式不会被应用。重置中的选择器比后面代码中仅针对 header 里的 a 标签使用的选择器具有更高阶的优先级，因此没有应用灰色样式。现在，如果我们将 :where() 伪类函数添加到 CSS 重置中，这将自动为重置中的所有元素赋予零的优先级。这使得我们以后更容易更改样式，而不必担心优先级冲突。5.2 删除样式如果想要删除或取消样式或降低一个或一组元素的优先级，则 :where() 函数非常有用。5.3 保持样式如果要确保一个元素或元素集的样式或优先级在未来的任何时候都不会改变，那么不要使用 :where() 伪类。6. 什么是 :is() 函数？:is() 函数的运行方式几乎与 :where() 函数相同。你可以用它来简化复杂的选择器，也可以把它放在选择器的开头、中间或结尾，就像 :where() 函数一样。它也是安全的，就像 :where() 函数一样。因此，当其中一个选择器无效时，浏览器将忽略该选择器，但有效选择器的样式将添加到所选元素中。7. :where() 和 :is() 函数的区别这两个函数的区别在于 :where() 函数的优先级总是零，则 :is() 函数的优先级取决于其最特定参数的优先级。例如，让我们看看 header 元素中的段落文本：<header>
<p>This is a paragraph text.</p>
</header>然后，让我们尝试使用四种不同的选择器来改变文本颜色：header p {
color: blue;
:is(header, section) p {
color: green;
p {
color: blue;
:where(header, section) p {
color: blue;
}第一个选择器将文本的颜色设置为蓝色。使用 :is() 的第二个选择器与第一个选择器具有相同的优先级，但由于它位于第一个选择器之后，因此它将文本颜色从蓝色更改为绿色。第三个选择器的优先级低于第一个和第二个选择器，对文本没有影响。最后是第四个，它使用 :where() 函数对文本没有影响，因为它的零优先级。8. 浏览器兼容性所有浏览器，无论是桌面浏览器还是移动浏览器，都完全支持 CSS :where() 函数，包括对其安全特性的支持。因此，你 不必担心你 的样式是否会在浏览器中正确呈现。
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
前端开发
安全
测试技术
CSS函数
开发者社区 >
开发与运维
文章
云迁移中心
作者高分内容
更多
深入了解 CSS 中的 :where() 和 :is() 函数
107
使用 CSS 创建自定义鼠标游标
8527
相关文章
一碗周
CSS的calc函数不会还有人没有用吧
CSS3新增的函数中有一个非常好用的函数，就是calc()函数，用过的都说好，这篇文章我们来唠一老calc函数。
33
卖坚果的怪叔叔
CSS函数
CSS函数
23
花花叔叔
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient(）
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient(）
26
程序员晚枫
jquery的css()函数同时设置多个css属性值
jquery的css()函数同时设置多个css属性值
45
李一花
api日常总结：前端常用js函数和CSS常用技巧
2603
程序员诗人
Less 极简教程： Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
Less 文件转换为 css 文件
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
1039
zting科技
jQuery CSS 函数
599
老朱教授
Wordpress用get_current_screen函数来选择性加载插件中的JS和CSS
1179
风来了
HTML/CSS/js 日期等其他函数 相关收藏
整理了一下浏览器收藏夹里的东西，发现好多连接都死掉了http://
js日期加减得到新的日期
让Editplus自动格式化js、css、html
最佳的"addEvent"是怎样诞生的
JS 动态修改 input 的 type 属性
document.compatMode介绍
JS随机数的函数
JScrambler：保护你的JavaScript代码
js自定义对象
JS代
1342
互联网fans
远离JS灾难css灾难之 js私有函数和css选择器作为容器
当一个项目庞大到一定阶段，例如UI展示层采用了模块化模板化之后，就会出现js灾难，css灾难，经常出现以前从来不放在一起的两个js或css莫名奇妙的被放到了一个页面，基本的原因是模块重用造成的
    尽管js可以想面向对象那样去构造对象，隐藏私有方法，但需求变化的往往比你写程序还要快时，就连...
732
+关注
游客mm3oox3r3c656
文章
问答
视频
作者高分内容
更多
深入了解 CSS 中的 :where() 和 :is() 函数
107
使用 CSS 创建自定义鼠标游标
8527
文章排行榜
最热
最新
Dubbo 在 Proxyless Mesh 模式下的探索与改进
34992
Hive数据倾斜的原因以及常用解决方案
33253
机器学习: 可视化反卷积操作
32803
高并发编程之阻塞队列
32811
Spring 事务【隔离级别与传播机制】
30561
EasyNLP集成K-Global Pointer算法，支持中文信息抽取
29634
阿里云EMR 2.0：定义下一代云原生智能数据湖
28841
Android体系课之--LeakCanary内存泄露检测原理解析
25960
借助阿里云 AHPA，苏打智能轻松实现降本增效
25540
10
宕机了，Redis 如何避免数据丢失？
24505
11
零基础快速开发Vue图书管理系统—登录注册篇（一）
22705
12
IoT设备数据的存储、解析和价值挖掘实践
22678
13
高德Go生态的服务稳定性建设｜性能优化的实战总结
22542
14
【实战企业级Java二】渐进式理解Redis分布式锁
22567
15
IoT Studio 物联网可视化应用搭建开发实践
21370
16
【OpenVI-图像超分实战篇】别用GAN做超分了，快来试试基于扩散模型的图像超分吧！
21320
17
PolarDB-X 数据节点备库重搭
20503
18
详解Java递归(Recursion)通过递归解决迷宫回溯及八皇后问题
20171
19
应用场景系列之（1）：流量管理下的熔断场景
16407
20
开源大数据可观测性方案实践 - 助力集群运维智能化、便捷化
16373
分享一个免梯子的GPT，刷题和学习的好帮手
51
【Spring源码】讲讲Bean的生命周期
55
超火的AI绘画Midjourney 超详细教程来了。含关键词及账号
56
让应用交付和管理统一：KubeVela 亮点功能及核心技术回顾
63
世界备份日｜有“备”而来，才能不为数据安全“蕉绿”
58
肝到头秃！百度强推并发编程笔记我爱了，原来这才叫并发
107
2023美赛春季赛A题思路数据代码论文分享
96
【Spring源码】 BeanFactory和FactoryBean是什么？
17074
Mindopt上新数据脱敏功能，方便外发数据
64
10
两条命令搞定 ChatGPT API 的调用问题，函数计算果然好用！
820
11
设计模式 | 原型模式
18165
12
2023年 | 四月云大使返佣规则
59
13
统一观测丨使用 Prometheus 监控 Nginx Ingress 网关最佳实践
128
14
Apache Paimon 在同程旅行的探索实践
371
15
最新版本 Stable Diffusion 开源 AI 绘画工具之汉化篇
57
16
麟系统开发笔记（十）：在国产麒麟系统上使用gdb定位崩溃异常方法流程以及测试Demo
114
17
WEB安全
78
18
源码解读：PolarDB-X中的窗口函数
56
19
阿里云EMAS移动测试最佳实践｜马来西亚第一大电子钱包通过EMAS测试提效6倍
175
20
OpenSearch上线实时热搜、个性化底纹功能
116
相关课程
更多
前端开发CSS基础
4162
21
去学习
零基础学前端HTML+CSS
8765
57
去学习
CSS 快速掌握
19111
49
去学习
推荐文章
参与OCR文档自学习产品评测，赢Airpods 2
参与云效代码管理Codeup评测，赢Redmi Watch 3
参与IoT小程序框架评测，赢CHERRY机械键盘
乘风者计划邀您入驻社区，精彩权益即刻享
相关电子书
更多
零基础CSS入门教程
立即下载
23-Vue.js在前端...1506518547.pdf
立即下载
JavaScript函数
立即下载
相关实验场景
更多
CSS实现千纸鹤样式
22
1.0小时
去实验
CSS实现指南针应用
89
1.0小时
去实验
CSS基础教程
107
1.0小时
去实验
JavaScript实现瀑布流布局
43
1.0小时
去实验
JavaScript实现轮播图展示
149
1.0小时
去实验
售前咨询95187转1专业技术咨询成熟解决方案产品全部产品免费试用产品定价产品动态解决方案技术动手实践技术使用案例行业解决方案文档与社区文档开发者社区天池大赛培训与认证支持与服务基础服务企业增值服务迁云服务官网公告系统状态关注阿里云了解阿里云阿里云APP阿里云微信法律声明及隐私权政策Cookies政策廉正举报安全举报联系我们阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘© 2009-2023 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙通网安【2019】94号 京D3-20220015浙公网安备 33010602009975号浙B2-20080101-4 关注我们：新浪微博 联系我们©2023 Aliyun All rights reserved