【CSS in Depth 2 精译_055】8.3 伪类 :is() 和 :where() 的正确打开方式

1024程序员节活动图片

当前内容所在位置(可进入专栏查看其他译好的章节内容)

  • 【第三部分 现代 CSS 代码组织】 ✔️
  • 【第八章 层叠图层及其嵌套】 ✔️
    • 8.1 用 layer 图层来操控层叠规则(上篇)
      • 8.1.1 图层的定义(上篇)
      • 8.1.2 图层的顺序与优先级(下篇)
      • 8.1.3 revert-layer 关键字(下篇)
    • 8.2 层叠图层的推荐组织方案
    • 8.3 伪类 :is() 和 :where() 的用法 ✔️
    • 8.4 CSS 嵌套的使用(精译中 ⏳)

文章目录

    • 8.3 伪类 :is() 和 :where() 的用法 The :is() and :where() pseudo-classes
      • 8.3.1 更宽容的选择器 More forgiving selectors
      • 8.3.2 对优先级的调控 Manipulating specificity

《CSS in Depth》新版封面

《CSS in Depth》新版封面

8.3 伪类 :is() 和 :where() 的用法 The :is() and :where() pseudo-classes

CSS 有两个相对较新的伪类选择器可用于代码的组织::is():where()。先来看看 :is() 伪类。

该伪类可以让大量选择器的书写变得简洁高效。为演示说明,考虑以下未使用 :is() 的 CSS 样式代码:

.contact-form input,
.contact-form textarea,
.contact-form select,
.contact-form button {padding: 5px 10px;border: 1px solid var(--brand-color);border-radius: 5px;
}

这段样式代码中,选择器存在明显重复,并且可读性也不强;而伪类 :is() 可以将所有内容合并为一个选择器,在实现同样效果的基础上让代码更加简洁明了。以下代码同之前的样式等效:

.contact-form :is(input, textarea, select, button) {padding: 5px 10px;border: 1px solid var(--brand-color);border-radius: 5px;
}

准确地说,:is() 伪类是一个函数,它接受一系列选择器作为参数,并匹配所有与给定选择器中的任意一个匹配的元素。

:is() 的优先级是由传入参数的最高优先级决定的。因此,:is(input, textarea, select, button) 的优先级为 0, 0, 1;而 :is(input, #login-password) 的优先级则为 1, 0, 0。无论最终匹配到的是哪个选择器参数,:is() 的优先级都固定不变。

警告

:is() 伪类选择器的参数不能是伪元素选择器(pseudo-element selectors)。所以类似 :is(div::before, div::after) 这样的写法是无效的;另一方面,传入另一个伪类作参数则是合法的。例如,写作 :is(:first-child) 则是有效的。

8.3.1 更宽容的选择器 More forgiving selectors

:is() 的另一个好处是它对无效或未识别的选择器更加宽容。考虑以下选择器:

input.invalid,
input:user-invalid {border: 1px solid red;
}

上述代码中,伪类 :user-invalid 相对较新,浏览器支持有限,因此在某些浏览器中,即使其他选择器匹配成功,整个选择集也会被忽略。这一限制偶尔会让开发者感到意外;为此,:is() 在设计时便尤为注重其对无效选择器的宽容性。上述代码可以改成下面这样,实现更符合预期的效果:

input:is(.invalid, :user-invalid) {border: 1px solid red;
}

按照这样修改后,不支持 :user-invalid 伪类的浏览器仍然可以让匹配样式类 .invalid 的部分生效,从而在样式表中以更优雅的方式实现新伪类的渐进式增强。

8.3.2 对优先级的调控 Manipulating specificity

:where() 伪类在功能上与 :is() 完全相同,唯一的区别在于 :where() 的优先级 始终为零。也就是说 :where() 可用于调低之前优先级较高的选择器。

假设想根据 ID 值来选中元素,但又不希望它覆盖掉同一图层(layer)上的其他样式,就可以编写一个像这样的选择器::where(#login-form) input。该选择器的优先级为 0, 0, 1 —— 它是 :where(#login-form) 的优先级 0, 0, 0input 的优先级 0, 0, 1 的结合。此外还可以将多个 :where() 伪类链接在一起(译注:如 :where(.class1) :where(.class2) { ... })。

在本章之前的一个示例中,我们希望用 .button 来覆盖选择器 a:any-link。这里也可以使用 :where() 伪类实现相同的效果,如代码清单 8.12 所示。当按钮样式(button styles)应用于同一元素时,链接样式(link styles)将被覆盖。

代码清单 8.12 利用 :where() 来调低优先级

a:where(:any-link) { /* 优先级为 0,0,1 */color: var(--brand-blue);font-weight: bold;
}
.button { /* 优先级为 0,1,0 */display: inline-block;padding: 0.5rem;color: white;background-color: var(--brand-blue);font-weight: normal;text-decoration: none;
}

在层叠图层推出以前,这是一种控制冗长选择器优先级的非常有用的写法;虽然目前 :where() 的使用频率不高,但在某些场合,尤其是在管理位于同一图层上的样式时,仍然很有用。

同理,也可以给 :is() 选择器传入一个优先级较高的选择器参数来有意调高该选择器的整体优先级。例如 :is(.button, #fake-id) 就人为创建了一个优先级为 1, 0, 0 的选择器;但我并不推荐这样写,毕竟选择器优先级还是应该尽量保持低位运行。



关于《CSS in Depth》(中译本书名《深入解析 CSS》)

第 1 版第 2 版
读者评分原版:4.7(亚马逊);中文版:9.3(豆瓣)原版:5.0(亚马逊);中文版:暂无,待出版
出版时间原版:2018 年 3 月;中文版:2020 年 4 月原版:2024 年 7 月;中文版:暂无,待出版
原价原版:$44.99;中文版:¥139.00原版:$59.99;中文版:暂无,待出版
现价原版:$36.49;中文版:¥52.54 起步原版:$52.09;中文版:暂无,待出版
原版国内预订起步价 ¥461.00起步价 ¥750.00

本专栏为该书第 2 版高分译文专栏,全网首发,精译精校,持续更新,计划今年内完成全书翻译,敬请期待!!!

目前已完结的章节(可进入本专栏查看详情,连载期间完全免费):

  • 第一章 层叠、优先级与继承(已完结)
    • 1.1 层叠
    • 1.2 继承
    • 1.3 特殊值
    • 1.4 简写属性
    • 1.5 CSS 渐进式增强技术
    • 1.6 本章小结
  • 第二章 相对单位(已完结)
    • 2.1 相对单位的威力
    • 2.2 em 与 rem
    • 2.3 告别像素思维
    • 2.4 视口的相对单位
    • 2.5 无单位的数值与行高
    • 2.6 自定义属性
    • 2.7 本章小结
  • 第三章 文档流与盒模型(已完结)
    • 3.1 常规文档流
    • 3.2 盒模型
    • 3.3 元素的高度
    • 3.4 负的外边距
    • 3.5 外边距折叠
    • 3.6 容器内的元素间距问题
    • 3.7 本章小结
  • 第四章 Flexbox 布局(已完结)
    • 4.1 Flexbox 布局原理
    • 4.2 弹性子元素的大小
    • 4.3 弹性布局的方向
    • 4.4 对齐、间距等细节处
    • 4.5 本章小结
  • 第五章 网格布局(已完结)
    • 5.1 构建基础网格
    • 5.2 网格结构剖析 (上)
      • 5.2.1 网格线的编号(下)
      • 5.2.2 网格与 Flexbox 配合(下)
    • 5.3 两种替代语法
      • 5.3.1 命名网格线
      • 5.3.2 命名网格区域
    • 5.4 显式网格与隐式网格(上)
      • 5.4.1 添加变化 (中)
      • 5.4.2 让网格元素填满网格轨道(下)
    • 5.5 子网格(全新增补内容)
    • 5.6 对齐相关的属性
    • 5.7 本章小结
  • 第六章 定位与堆叠上下文(已完结)
    • 6.1 固定定位
      • 6.1.1 创建一个固定定位的模态对话框
      • 6.1.2 在模态对话框打开时防止屏幕滚动
      • 6.1.3 控制定位元素的大小
    • 6.2 绝对定位
      • 6.2.1 关闭按钮的绝对定位
      • 6.2.2 伪元素的定位问题
    • 6.3 相对定位
      • 6.3.1 创建下拉菜单(上)
      • 6.3.2 创建 CSS 三角形(下)
    • 6.4 堆叠上下文与 z-index
      • 6.4.1 理解渲染过程与堆叠顺序(上)
      • 6.4.2 用 z-index 控制堆叠顺序(上)
      • 6.4.3 深入理解堆叠上下文(下)
    • 6.5 粘性定位
    • 6.6 本章小结
  • 第七章 响应式设计(已完结)
    • 7.1 移动端优先设计原则(上篇)
      • 7.1.1 创建移动端菜单(下篇)
      • 7.1.2 给视口添加 meta 标签(下篇)
    • 7.2 媒体查询(上篇)
      • 7.2.1 深入理解媒体查询的类型(上篇)
      • 7.2.2 页面断点的添加(中篇)
      • 7.2.3 响应式列的添加(下篇)
    • 7.3 流式布局
    • 7.4 响应式图片
    • 7.5 本章小结

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/57163.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React基础语法

1.React介绍 React由Meta公司开发,是一个用于构建Web和原生交互界面的库 1.1 React优势 相较于传统基于DOM开发的优势 1.组件化的开发方式 2.不错的性能 相较于其他前端框架的优势 1.丰富的生态 2.跨平台支持 1.2React的时长情况 全球最流行,大厂…

C语言数据结构:排序(2)

文章目录 4.选择排序4.1 基本思想4.2 排序实现 5.快排5.1 基本思想5.2 递归实现快排5.3 快排优化5.4 双指针法完成快排5.5 快排的非递归 6.归并排序6.1 基本思想6.2 排序的实现6.3 归并排序的非递归 7. 计数排序7.1 基本思想7.2 排序实现7.3 排序的优缺点 8.排序总结 4.选择排序…

C++初阶教程——C++入门

一、本章主要内容 C在C的基础之上,加入了面向对象编程的思想,并增加了许多有用的库以及编程范式。可以说,C是C的子集。在这章的内容中,笔者将会为诸位读者讲C如何补充C语言的一些不足。比如:作用域、IO、函数、指针等。…

【Golang】Go语言中如何进行包管理

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,…

JetBrains IDE中GPU进程(JCEF)重启问题(Too many restarts of GPU-process)解决方案

目录 前言1. GPU进程重启问题概述1.1 什么是GPU进程重启问题?1.2 该问题带来的影响 2. GPU进程重启问题的原因分析2.1 显卡驱动的兼容性问题2.2 系统资源的限制2.3 JCEF组件的设置不合理 3. 解决方案3.1 方法一:通过自定义属性禁用GPU加速3.2 方法二&…

20241028在荣品PRO-RK3566开发板的预置Android13下用iperf3测试AP6256的WIFI网速

20241028在荣品PRO-RK3566开发板的预置Android13下用iperf3测试AP6256的WIFI网速 2024/10/28 18:17 荣品PRO-RK3566开发板作为服务器端: 笔记本电脑作为客户端。 接公司的网络。 在笔记本电脑的ubuntu20.04下,通过nethogs实测iperf3的发送速度大概是10MB…

410wifi的正确利用之路——debian 11

装上openwrtadguard太卡了,10min自启一次,当无线网卡都费劲。 网桥、USB千万网段要和主网独立 wifi连接激活后再改静态ip 高通410 修复debian 11的环境 1 换debian11源 (1)切换为国内的软件源(可以加快软件更新时的…

压力测试Monkey命令参数和报告分析!

adb的操作命令格式一般为&#xff1a;adb shell monkey 命令参数 PART 01 常用参数 ⏩ -p <测试的包名列表> 用于约束限制&#xff0c;用此参数指定一个或多个包。指定包之后&#xff0c;Monkey将只允许系统启动指定的APP。如果不指定包&#xff0c;Monkey将允许系统…

SSA-CNN-LSTM-MATT多头注意力机制多特征分类预测

SSA-CNN-LSTM-MATT多头注意力机制多特征分类预测 目录 SSA-CNN-LSTM-MATT多头注意力机制多特征分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 1.Matlab实现SSA-CNN-LSTM-MATT麻雀算法优化卷积神经网络-长短期记忆神经网络融合多头注意力机制多特征分类预测&…

GPU 服务器厂家:中国加速计算服务器市场的前瞻洞察

科技的飞速发展&#xff0c;让 GPU 服务器在加速计算服务器领域的地位愈发凸显。中国加速计算服务器市场正展现出蓬勃的生机&#xff0c;而 GPU 服务器厂家则是这场科技盛宴中的关键角色。 从市场预测的趋势来看&#xff0c;2023 年起&#xff0c;中国加速计算服务器市场便已展…

Go第三方框架--gorm框架(二)

增删改查&#xff08;dml操作&#xff09; 查询操作 gorm查询主要执行了三种操作&#xff1a; 通过链式函数调用累计查询条件&#xff08;在map[string]clause.Clause中累计&#xff09;将查询条件转换成sql&#xff08;赋值给 Statement.SQL和Statement.Vals&#xff09;执…

A Simple Semi-Supervised Learning Framework for Object Detection

1. Introduction SSL的成功主要有以下两个方面&#xff1a; &#xff08;1&#xff09;一致性正则化&#xff1a;如果对一个未标记的数据应用实际的扰动, 其预测结果不应该发生显著变化, 也就是输出具有一致性&#xff0c;通过在未标记数据上构造添加扰动后的预测结果 y~​ 与…

【51 Pandas+Pyecharts | 深圳市共享单车数据分析可视化】

文章目录 &#x1f3f3;️‍&#x1f308; 1. 导入模块&#x1f3f3;️‍&#x1f308; 2. Pandas数据处理2.1 读取数据2.2 查看数据信息2.3 处理起始时间、结束时间2.4 增加骑行时长区间列2.5 增加骑行里程区间列 &#x1f3f3;️‍&#x1f308; 3. Pyecharts数据可视化3.1 各…

webGlL变量的声明与使用

抢先观看&#xff1a; 变量的声明格式&#xff1a;<存储限定符><类型限定符><变量名> 存储限定符&#xff1a;const, attribute, uniform, varying, buffer。 类型限定符&#xff1a;void, bool, int, float, double, vec2, vec3, vec4, mat2, mat3, mat4, s…

基于SSM的成都市旅游信息管理系统-计算机毕业设计源码65815

SSM成都市旅游信息管理系统 摘 要 本论文主要论述了如何使用SSM框架开发一个旅游信息管理系统&#xff0c;严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构JAVA技术&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论述旅游信息管理系…

91.【C语言】数据结构之单向链表的头删和尾删

目录 1.尾删函数SLTPopBack 代码示例(写入SList.c) 在SList.h中写入该函数的声明 main.c部分代码改为 ​编辑 分析 解决方法 方法1:双指针算法(快指针tail,慢指针pretail) 方法2 2.头删函数SLTPopFront 一个节点示意图 多个节点示意图 代码示例(写入SList.c) 在S…

DEVOPS: 集群伸缩原理

概述 阿里云 K8S 集群的一个重要特性&#xff0c;是集群的节点可以动态的增加或减少有了这个特性&#xff0c;集群才能在计算资源不足的情况下扩容新的节点&#xff0c;同时也可以在资源利用 率降低的时候&#xff0c;释放节点以节省费用理解实现原理&#xff0c;在遇到问题的…

华为OD机试 - 无向图染色(Java 2024 E卷 100分)

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;E卷D卷A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;私信哪吒&#xff0c;备注华为OD&#xff0c;加…

云智慧完成华为原生鸿蒙系统的适配, 透视宝 APM 为用户体验保驾护航

2024 年 10 月 22 日&#xff0c;首个国产移动操作系统 —— 华为原生鸿蒙操作系统 HarmonyOS NEXT 正式面世&#xff0c;成为继 iOS 和 Android 后的全球第三大移动操作系统。HarmonyOS NEXT&#xff0c;从系统内核、数据库根基&#xff0c;到编程语言创新、AI&#xff08;人工…

无人机之任务分配算法篇

无人机的任务分配算法是无人机系统中的重要组成部分&#xff0c;它决定了无人机如何高效、合理地执行各种任务。以下是一些常见的无人机任务分配算法&#xff1a; 一、合同网协议&#xff08;Contract Net Protocol, CNP&#xff09; 基本概念&#xff1a;CNP算法是一种分布式…