LOCAL SELECTOR ANALYSIS

CSS 选择器权重计算器

按 A（ID）、B（类/属性/伪类）、C（类型/伪元素）计算 specificity。结果按三段从左到右比较，不把它压成容易误判的“100/10/1 分数”。

选择器输入

最多 20,000 字符、250 个选择器。

0 字符 · 0 个有效选择器
有效0
错误0
最高权重-
最高并列0

等待选择器

输入项目中的选择器，或载入示例查看 A/B/C 权重与现代伪类规则。

COMPARE TWO SELECTORS

两项直接比较

数值越靠左越先决定胜负。

B 权重更高

每行输入一个选择器；同一行也可以用逗号分隔多个选择器。

权重不是十进制分数

(1,0,0) 会高于 (0,99,99)，因为先比较 ID 段，再比较类和属性段，最后才比较元素段。不要把三段随意相加。

同权重再看来源顺序

如果 specificity 相同，通常由级联层、来源、important、作用域与后出现的规则决定。这个工具只负责选择器权重，不模拟完整级联。

高权重不等于更好

大量 ID、深层嵌套和 :has() 参数可能让组件很难覆盖。优先使用稳定、可复用的类，并通过 cascade layers 管理来源。

RELATED TOOLS

接着处理

查看全部工具 →
Selector / XPath 测试用实际 HTML 检查选择器命中元素。CSS Token 提取审计变量、作用域与缺失引用。CSS 压缩上线前压缩和优化样式文件。HTML 在线预览在隔离页面中验证级联结果。

USE & REVIEW

CSS 选择器权重计算器常见问题

查看全部工具指南 →

CSS specificity 的 A、B、C 分别代表什么？

A 统计 ID 选择器，B 统计类、属性和伪类，C 统计类型选择器和伪元素。比较时先看 A，再看 B，最后看 C；因此 (1,0,0) 会高于 (0,99,99)，不能把三段简单换算成 100、10、1 后相加。内联 style 和 !important 属于更完整级联中的其他维度，不在普通选择器三元组里。

:is()、:not()、:has() 和 :where() 怎样计算权重？

:is()、:not() 和 :has() 本身不额外增加一项，而采用参数列表中最高的选择器权重；:where() 及其所有参数始终贡献 (0,0,0)。这正是简单数点或正则计算器容易出错的部分，当前工具使用选择器 AST 和现代 specificity 算法处理。

两个选择器权重相同，为什么页面结果仍不同？

Specificity 只是级联的一部分。同权重时还要看样式来源、cascade layer、作用域接近程度、!important、媒体条件和源码出现顺序。工具只计算选择器权重，不加载页面样式，也不会模拟完整浏览器级联；应配合 DevTools 的 Computed/Styles 面板核对。

权重越高越好吗？

不是。ID、多层嵌套和把高权重选择器塞进 :is() 或 :has() 会让组件难以复用和覆盖，常导致后来只能继续堆权重或使用 !important。稳定的类名、较浅结构、cascade layers 和明确组件边界通常更容易维护。

为什么工具不显示一个总分？

CSS 权重是按位比较的有序三元组，不是十进制总分。显示单个总分会让大量类选择器看起来可能超过一个 ID，产生错误结论。CSV 会分别保留 A、B、C，便于排序、审计和团队讨论。

可以直接粘贴整份 CSS 文件吗？

当前输入面向选择器列表，每行一个选择器，同一行可用逗号分隔多个选择器。不要粘贴包含声明块的整份 CSS；可以先从 DevTools、代码搜索或构建产物提取需要比较的选择器，再用 Selector 测试器验证它们实际命中了哪些元素。