CSS 权重计算
计算选择器 specificity 权重
前端与计算
🔒 100% 本地运行 — 你的数据不会离开当前页面由 Evan 维护•最近更新：2026年9月29日
选项模式
CSS 选择器
按行或逗号分隔选择器。分数依次表示 ID、类/属性/伪类、类型/伪元素；完整层叠还需考虑来源与层。
Specificity
Specificity result will appear here
🔒 浏览器内本地处理
页面阅读模式
完整说明还包括常见问题处理、操作示例、代码片段、FAQ 和相关工具，便于核对结果或排查问题。
工具说明
解析选择器并计算 ID、类/属性/伪类、类型/伪元素三列权重。支持按行输入及逗号分隔列表，逐项计算 :where()、:is()、:not()、:has()、nth-child(... of ...) 等规则。独立的嵌套 & 缺少父级上下文，会报无法解析。
生产可用片段
现代选择器的权重示例
text
:where(#app) .card => 0,1,0
:is(#app, .card)::before => 1,0,1
li:nth-child(2n of #featured, .item) => 1,1,1
a, #nav => separate 0,0,1 and 1,0,0 rows常见问题
如何比较 a,b,c？
按从左到右的列顺序比较：先 ID，再类/属性/伪类，最后类型/伪元素。它不是十进制数；0,10,0 仍低于 1,0,0。
:where()、:is()、:not()、:has() 怎样计分？
:where() 连同参数的贡献为零；:is()、:not()、:has() 使用参数选择器中的最高权重，自身不额外增加一个伪类分数。
伪元素和 nth-child 的规则相同吗？
::before 等伪元素计入 c；:nth-child() 自身在 b 加一，若包含 of 选择器列表，还需加上列表中的最高权重。
权重更高就一定生效吗？
不一定。还需考虑规则是否适用、来源与重要性、层叠层等。权重只在对应的层叠阶段比较；作用域接近程度及源码顺序也可能在后续打破平局。
解析成功能证明浏览器支持吗？
不能。它在没有 DOM 和样式表上下文的情况下计算权重。解析器检测到的语法错误和独立 & 会报错，但可解析的选择器仍可能在目标浏览器中不支持或无效。
继续浏览