CSS 选择器
CSS 选择器
选择器引擎将 CSS 选择器文本解析为结构化形式，并对 DOM 树进行评估。它支持直接查询和层叠规则匹配。
运行选择器
select() 对选择器在树上进行评估并返回匹配项；element_matches() 测试单个元素。两者都接受标准的选择器语法——类型、类、id、属性和伪类选择器，包括复合和复杂的组合。
已解析的选择器结构
parse() 生成一个 SelectorList，其中包含 ComplexSelector 和 CompoundSelector 条目，这些条目由 TypeSelector、ClassSelector、IDSelector、AttributeSelector（包含 AttributeOperator）、UniversalSelector 和 Combinator 部分构成。
伪类
功能伪类被显式建模：IsPseudoClass、WherePseudoClass、HasPseudoClass、ComplexNotPseudoClass，以及通过 NthFilteredChildPseudoClass 与 NthArgument 的结构性 nth-child 变体。
Specificity
specificity() 计算选择器的标准三分量元组，max_specificity() 对列表进行归约；match() 将解析与求值结合起来。这些与层叠使用的值相同，因此查询结果和计算样式始终一致。
技巧与最佳实践
- 在过滤器内部使用
element_matches()，而不是对每个元素重新运行select() - 只解析一次，并在相同选择器针对多个树运行时复用
SelectorList - 当规则意外失去层叠时，直接比较
specificity()值
常见问题
| 问题 | 原因 | 修复 |
|---|---|---|
| 选择器未匹配任何内容 | 选择器文本语法错误 | parse() 通过 syntax_error 引发 — 检查消息 |
| 等特异性并列时解析为 “wrong” | 顺序依赖 | 后面的规则在平局时获胜；检查规则顺序 |
:is() 与 :where() 的混淆 | :where() 贡献为零特异性 | 根据预期的层叠权重进行选择 |
FAQ
我如何测试单个元素是否匹配选择器？
element_matches() — 它返回一个布尔值，而不扫描树。
特异性是如何计算的？
specificity() 返回标准的 (id, class, type) 组件元组；:where() 组贡献为零。
支持哪些伪类？
在 API 中的结构化形式有：:is()、:where()、:has()、:not()（带有复杂参数），以及 nth-child 样式的结构选择器。
API Reference 摘要
| 类/方法 | 描述 |
|---|---|
select | 在树上评估选择器 |
element_matches | 测试一个元素 |
parse | 将选择器文本解析为一个 SelectorList |
specificity | 计算特异性元组 |
HasPseudoClass | 结构化 :has() 形式 |
AttributeSelector | 带有运算符的属性匹配器 |
