高级 CSS 选择器：精通 :has()、:is()、:where() 和优先级
CSS 不再仅仅是样式的集合。利用现代选择器，它已成为一个强大的逻辑引擎，允许您在不编写任何 JavaScript 的情况下，在元素之间创建复杂的、响应式的关系。
在本指南中，我们将探索 CSS 选择器的“超能力”，以及它们如何改变我们对级联的思考方式。
2. 使用 :is() 和 :where() 让 CSS 更简洁
这些“逻辑”选择器允许您将多个选择器组合在一起，使您的代码明显更简洁、更易读。
:is() 伪类
组合多个选择器，并采用其任何参数中的最高优先级。
/* 之前 */
header h1, header h2, header h3 { margin-bottom: 20px; }
/* 之后 */
header :is(h1, h2, h3) { margin-bottom: 20px; }
:where() 伪类
与 :is() 类似，但它优先级始终为 0。这非常适合基准样式（如“重置”或“基础”层），您希望以后可以轻松覆盖这些样式。
3. 使用高级 :nth-child() 进行有针对性的样式设置
:nth-child() 选择器获得了重大升级。您现在可以使用 "of S" 语法，根据元素在特定子集中的位置来选择它。
/* 选择过滤列表中第 2 个可见项 */
li:nth-child(2 of .visible) {
background-color: yellow;
}
这对于某些项可能通过 display: none 隐藏的动态列表非常有用。
4. 精通优先级 (Specificity)
CSS 中最大的痛点之一是“优先级战争”——当样式由于另一个选择器更“强”而无法应用时。
优先级公式：
- 内联样式：（例如
style="..."）- 最高优先级。 - ID：
#my-element（得分：1, 0, 0）。 - 类、属性、伪类：
.my-class、[type="text"]、:hover（得分：0, 1, 0）。 - 元素和伪元素：
div、h1、::before（得分：0, 0, 1）。
现代建议：使用 @layer（级联层）来管理整个项目的优先级。
5. 优先级可视化
如果您不确定为什么某个样式没有生效，我们建议使用优先级计算器。此工具会分解您的选择器并给出数值分数，帮助您立即识别冲突。
高级选择器总结
| 选择器 | 最适用于 | 优先级 | 支持情况 |
|---|---|---|---|
| :has() | 基于子元素/状态设置样式 | 普通 | 广泛支持 |
| :is() | 分组，代码更简洁 | 最高参数值 | 广泛支持 |
| :where() | 零优先级的基本样式 | 始终为 0 | 广泛支持 |
| :nth-child | 动态列表样式设置 | 普通 | 广泛支持 |
结论
现代 CSS 选择器为您提供了编程语言的“逻辑”，同时具备原生 CSS 的性能。通过精通 :has() 并理解优先级，您可以构建更健壮、更不容易出错的 UI 关系。
想测试您的选择器吗？查看我们的 CSS 选择器测试器，并关注我们即将推出的 CSS 优先级计算器！