🎯
CSS 优先级计算
解析 CSS 选择器,计算其特异性(specificity)权重 (a,b,c),排查样式覆盖。
本地处理 · 不上传
加载工具中…
相关：CSS优先级 · 特异性 · specificity · 选择器权重 · 样式覆盖
CSS 优先级计算解析选择器并算出它的特异度权重，可同时比较多个选择器判断谁会胜出。样式不生效时先算一算往往就找到原因。
使用步骤
- 输入一个或多个 CSS 选择器
- 查看各自的特异度数值
- 对比谁的优先级更高
- 据此调整选择器写法
使用场景
- 排查样式被覆盖不生效的问题
- 重构样式表时评估选择器权重
- 理解为什么加了类名还是不起作用
- 制定团队的选择器书写规范
小贴士
- 特异度按 ID、类/属性/伪类、元素/伪元素三级计数，高位不为零时低位再多也无法翻盘——十个类也压不过一个 ID。
- 内联样式高于任何选择器，`!important` 又高于内联，但这两者都应尽量避免，它们会让后续维护无处下手。
- 特异度相同时后出现的规则胜出，因此样式表的引入顺序同样影响最终结果。
常见问题
为什么加了 !important 还是不生效？
可能对方也用了 !important 且特异度更高，或者你的规则根本没匹配到元素。另外，动画中的样式在特定阶段优先级更高。
:is() 和 :where() 的权重怎么算？
`:is()` 取括号内特异度最高的那个参数计入，`:where()` 特异度恒为 0。后者常用于写不增加权重的兜底样式。
怎么避免特异度打架？
保持选择器扁平、优先用单个类名、不用 ID 做样式钩子。BEM 之类的命名约定就是为了让所有规则处于同一权重层级。
CSS 优先级计算是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 优先级计算，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。