免费开发者工具
CSS 优先级计算器 - 计算选择器 Specificity
输入 CSS 选择器，计算 ID、class、属性、伪类和元素的 specificity 权重，适合排查样式覆盖问题。
工具加载中...
快速答案
CSS 优先级计算器可以告诉你选择器权重为什么会覆盖其他样式。
它适合排查样式冲突、设计系统规则、组件覆盖和调试选择器。
适合输入
清晰输入
准备好要处理的CSS 选择器，避免混入不相关内容。
确认目标
先确定要复制、换算、统计或生成的结果类型，减少来回调整。
本地复核
结果适合快速处理和初步判断，重要场景仍应按业务规则复核。
计算方式
工具按 CSS specificity 规则统计 ID、class/属性/伪类和元素部分。
ID 权重通常最高。
class、属性和伪类会增加中间权重。
元素选择器权重较低。
示例、假设和限制
工具结果适合快速估算、转换和整理；关键场景建议按业务规则复核。
示例
#app .button:hover 的权重会高于 .button。
假设
输入是标准 CSS 选择器，用户需要理解覆盖关系。
限制
实际样式还受顺序、继承、层叠层、important 和浏览器规则影响。
常见使用场景
这些中文页面面向轻量、快速、浏览器本地完成的日常任务。
样式冲突
解释为什么某条规则生效。
组件覆盖
检查选择器是否过重。
设计系统
控制规则复杂度。
教学示例
演示 specificity 规则。
常见问题
Specificity 是什么？
它是 CSS 判断选择器优先级的一部分。
它能解释所有覆盖吗？
不能，还要考虑顺序、important、层叠层和继承。
会上传选择器吗？
不会。计算在浏览器中完成。
ID 一定不要用吗？
不是，但 ID 会提高权重，组件样式中应谨慎使用。
推荐流程
CSS 调试流程
先整理 CSS，再计算选择器权重。