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

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

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

《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, 0 与 input 的优先级 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》）

本专栏为该书第 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 本章小结