CSS 伪类函数 :where() 详解

:where() 是 CSS 中的一个伪类函数，它接受一个选择器列表作为参数，并选择所有能被该选择器列表中任何一条规则选中的元素。与 :is() 类似，:where() 提供了一种简洁的方式来组合多个选择器，但其优先级行为与 :is() 不同。本文将详细介绍 :where() 的语法、用法以及与 :is() 的区别。

---

1. :where() 的基本语法

:where(<complex-selector-list>) {
  /* 样式规则 */
}

• <complex-selector-list>：一个选择器列表，可以是多个选择器的组合。
• 作用：选择所有能被选择器列表中任何一条规则选中的元素。

---

2. :where() 的示例

以下示例展示了如何使用 :where() 选择多个元素并应用样式：

/* 选择 header、main 或 footer 元素内的段落，并在悬停时应用样式 */
:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

等效写法：

header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

---

3. :where() 与 :is() 的区别

:where() 和 :is() 的功能相似，但它们的优先级行为不同：

特性	:where()	:is()
优先级	优先级总是为 0	优先级由选择器列表中优先级最高的选择器决定
使用场景	用于降低选择器的优先级，避免样式冲突	用于保持选择器的优先级

示例：

/* :where() 的优先级为 0 */
:where(header, main, footer) p {
  color: blue;
}

/* :is() 的优先级由选择器列表中的最高优先级决定 */
:is(header, main, footer) p {
  color: green;
}

• 如果 header p 的优先级高于 :where()，则 :where() 的样式会被覆盖。
• 如果 header p 的优先级低于 :is()，则 :is() 的样式会生效。

---

4. 可容错选择器解析

:where() 和 :is() 都支持可容错选择器解析。这意味着，如果选择器列表中的某个选择器无效，浏览器会忽略该选择器，而不会使整个选择器列表失效。

示例：

/* 即使 :unsupported 是无效的选择器，:valid 仍然会生效 */
:where(:valid, :unsupported) {
  color: green;
}

对比：

/* 如果 :unsupported 是无效的选择器，整个选择器列表会失效 */
:valid,
:unsupported {
  color: green;
}

---

5. 使用场景

5.1 简化选择器

:where() 可以简化复杂的选择器组合，减少代码量。

/* 简化前 */
header p,
main p,
footer p {
  color: blue;
}

/* 简化后 */
:where(header, main, footer) p {
  color: blue;
}

5.2 降低优先级

:where() 的优先级为 0，适合用于覆盖样式时避免冲突。

/* 低优先级样式 */
:where(header, main, footer) p {
  color: blue;
}

/* 高优先级样式 */
header p {
  color: red;
}

5.3 容错处理

:where() 支持可容错选择器解析，适合处理可能存在无效选择器的情况。

/* 即使 :unsupported 无效，:valid 仍然生效 */
:where(:valid, :unsupported) {
  color: green;
}

---

6. 总结

特性	:where()	:is()
优先级	优先级总是为 0	优先级由选择器列表中优先级最高的选择器决定
可容错	支持可容错选择器解析	支持可容错选择器解析
使用场景	简化选择器、降低优先级、容错处理	简化选择器、保持优先级