使用 CSS :where() 简化选择器并管理优先级

在编写 CSS 时，我们经常会遇到需要对多个元素应用相同样式的情况。传统的写法往往会导致选择器变得非常冗长。:where() 伪类的出现，不仅帮我们简化了代码，还带来了一个非常有趣的特性：零优先级。

什么是 :where()？

:where() 是一个 CSS 伪类函数，它接受一个选择器列表作为参数，并将选择的样式应用于该列表中的所有元素。

简化选择器

假设你想为 section 和 nav 下的标题和段落设置相同的颜色。

传统写法（代码较多）：

section h1,
section p,
nav h1,
nav h2,
nav h3,
nav h4,
nav h5,
nav h6,
nav p,
nav ul li {
    color: red; 
}

使用 :where() 优化（代码精简）：

:where(section, nav) :where(h1, h2, h3, h4, h5, h6, p, ul li) {
    color: red;
}

通过嵌套使用 :where()，我们可以极大地减少重复代码，使样式表更加清晰易读。

:where() 的核心特性：零优先级

这是 :where() 与类似的 :is() 伪类最大的区别：:where() 的优先级（Specificity）始终为 0。

这意味着，无论你在 :where() 中写了多么复杂的选择器，它的权重都不会增加。这在以下场景中非常有用：

1. 创建基础样式库：你可以使用 :where() 定义一些默认样式，而不用担心它们会因为权重太高而难以被后续的样式覆盖。
2. 重置样式（Reset）：在进行 CSS 重置时，使用 :where() 可以保证重置样式的优先级最低。

总结

• 简化代码：通过合并选择器减少冗余。
• 灵活覆盖：利用其零优先级的特性，让样式覆盖变得更加简单可控。
• 浏览器支持：目前主流浏览器（Chrome 88+, Firefox 78+, Safari 14+）都已经提供了良好的支持。

如果你还在为冗长的选择器和复杂的权重计算而烦恼，不妨尝试一下 :where()！