可以开始使用
浏览器本地 · 无需账号 · 结果留在当前页面
试试常见优先级检查
选择器
5
最强选择器
1-1-1
格式
A-B-C
| 分数 | IDs | Classes | Elements | 选择器 |
|---|---|---|---|---|
| 1-1-1 | 1 | 1 | 1 | #app .card > h2 |
| 0-3-0 | 0 | 3 | 0 | .button.primary:hover |
| 0-2-3 | 0 | 2 | 3 | main article.post[data-state="published"] h1 |
| 0-1-2 | 0 | 1 | 2 | :where(.shell) nav a[aria-current="page"] |
| 0-1-1 | 0 | 1 | 1 | :is(header, main, footer) .link |
CSS 优先级计算器可以告诉你选择器权重为什么会覆盖其他样式。
它适合排查样式冲突、设计系统规则、组件覆盖和调试选择器。
清晰输入
准备好要处理的CSS 选择器，避免混入不相关内容。
确认输出用途
先确认结果要用于发布、调试、估算、整理还是交付，再选择合适参数。
复核关键边界
结果适合快速处理和初步判断，重要场景仍应按目标平台、团队规则或业务口径复核。
示例
#app .button:hover 的权重会高于 .button。
假设
输入是标准 CSS 选择器，用户需要理解覆盖关系。
限制
实际样式还受顺序、继承、层叠层、important 和浏览器规则影响。
复制完整选择器
少复制一个 class、伪类或属性选择器，计算出的权重就可能和真实 CSS 不一致。
先找覆盖来源
优先级只是原因之一，样式顺序、媒体查询、继承和内联样式也会影响最终结果。
少用更高权重硬压
如果每次都加 ID 或 !important，样式会越来越难维护，应该先简化选择器结构。
适合排查样式不生效
当 hover、媒体查询或组件 class 没生效时，先看选择器权重和声明顺序。
它不读取真实 CSS 文件
页面只按输入选择器计算权重，最终样式还要结合加载顺序、继承和变量值。
重构优于不断加权重
长期维护时，减少嵌套选择器和隐式覆盖，比增加更高权重更健康。
样式冲突
解释为什么某条规则生效。
组件覆盖
检查选择器是否过重。
设计系统
控制规则复杂度。
教学示例
演示 specificity 规则。
Specificity 是什么？
它是 CSS 判断选择器优先级的一部分。
它能解释所有覆盖吗？
不能，还要考虑顺序、important、层叠层和继承。
会上传选择器吗？
不会。计算在浏览器中完成。
ID 一定不要用吗？
不是，但 ID 会提高权重，组件样式中应谨慎使用。
!important 会改变优先级计算吗？
!important 会进入更高优先级层级，常规 specificity 数字仍有参考价值，但不能单独解释所有覆盖情况。
为什么权重更高的样式仍然没生效？
可能被媒体查询、加载顺序、内联样式、CSS 变量、浏览器默认样式或样式层级影响，需要结合真实页面排查。
Specificity 是什么？
它是 CSS 判断选择器优先级的一部分。
它能解释所有覆盖吗？
不能，还要考虑顺序、important、层叠层和继承。
会上传选择器吗？
不会。计算在浏览器中完成。
ID 一定不要用吗？
不是，但 ID 会提高权重，组件样式中应谨慎使用。
!important 会改变优先级计算吗？
!important 会进入更高优先级层级，常规 specificity 数字仍有参考价值，但不能单独解释所有覆盖情况。
为什么权重更高的样式仍然没生效？
可能被媒体查询、加载顺序、内联样式、CSS 变量、浏览器默认样式或样式层级影响，需要结合真实页面排查。
推荐流程
CSS 调试流程
先整理 CSS，再计算选择器权重。