编辑“︁CSS ` where()` 伪类”︁

= CSS `:where()` 伪类 =

'''`:where()`''' 是 CSS 中的一个功能强大的伪类选择器，它允许开发者以更简洁的方式编写复杂的选择器，同时保持较低的[[特异性 (CSS)|特异性]]（specificity）。它通常用于简化选择器列表，避免重复代码，并提高样式表的可维护性。本文将详细介绍 `:where()` 的语法、用法、实际应用场景以及与其他选择器的区别。

== 基本语法 ==
`:where()` 伪类的语法结构如下：

<syntaxhighlight lang="css">
:where(selector1, selector2, selector3, ...) {
  /* CSS 属性和值 */
}
</syntaxhighlight>

其中，`selector1, selector2, selector3, ...` 是一个或多个选择器，`:where()` 会将这些选择器组合在一起，但不会增加它们的特异性。这意味着 `:where()` 中的选择器始终具有 0 的特异性。

== 与 `:is()` 的区别 ==
`:where()` 和 `:is()` 在语法上非常相似，但它们在特异性上有重要区别：
* `:where()` 的特异性始终为 0。
* `:is()` 的特异性等于其参数中最具体的选择器的特异性。

例如：
<syntaxhighlight lang="css">
/* 特异性为 0 */
:where(.class, #id, div) {
  color: red;
}

/* 特异性等于 #id（即 1,0,0） */
:is(.class, #id, div) {
  color: blue;
}
</syntaxhighlight>

== 实际应用示例 ==

=== 简化选择器列表 ===
`:where()` 可以用于简化多个选择器共享相同样式的情况。例如：
<syntaxhighlight lang="css">
/* 传统写法 */
header h1,
main h1,
footer h1 {
  font-size: 2rem;
}

/* 使用 :where() 简化 */
:where(header, main, footer) h1 {
  font-size: 2rem;
}
</syntaxhighlight>

=== 重置样式 ===
由于 `:where()` 的特异性为 0，它非常适合用于重置样式或提供默认样式，这些样式可以轻松被覆盖：
<syntaxhighlight lang="css">
/* 低特异性重置样式 */
:where(ul, ol) {
  padding-left: 0;
  list-style: none;
}

/* 后续可以轻松覆盖 */
article ul {
  padding-left: 2em;
  list-style: disc;
}
</syntaxhighlight>

=== 框架和组件开发 ===
在CSS框架或组件库中，`:where()` 可以确保开发者提供的样式不会意外覆盖用户的自定义样式：
<syntaxhighlight lang="css">
/* 框架中的样式 */
:where(.framework-button) {
  padding: 0.5em 1em;
  border: 1px solid #ccc;
}

/* 用户可以轻松覆盖 */
.user-button {
  padding: 1em 2em;
}
</syntaxhighlight>

== 浏览器兼容性 ==
`:where()` 伪类在现代浏览器中得到广泛支持：
* Chrome 88+
* Firefox 78+
* Safari 14+
* Edge 88+
* Opera 75+

对于不支持 `:where()` 的旧版浏览器，可以使用 `:is()` 作为替代方案，但需要注意特异性差异。

== 性能考虑 ==
`:where()` 的性能与常规选择器相当。浏览器会像处理其他选择器一样处理 `:where()`，不会带来明显的性能开销。

== 最佳实践 ==
1. 使用 `:where()` 来简化复杂的选择器列表
2. 在需要低特异性样式时优先考虑 `:where()`
3. 在框架开发中使用 `:where()` 确保用户样式优先
4. 注意与 `:is()` 的区别，根据特异性需求选择使用

== 总结 ==
`:where()` 伪类是 CSS 中一个强大的工具，它通过提供零特异性的选择器组合能力，帮助开发者编写更简洁、更易维护的样式表。无论是简化选择器列表、创建可覆盖的默认样式，还是开发用户友好的框架，`:where()` 都能发挥重要作用。理解并合理使用 `:where()` 可以显著提升你的 CSS 编写效率和质量。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS高级选择器]]