ToolHub
打开工具

CSS 优先级计算器

计算并对比 CSS 选择器优先级分数，可视化分解

开发者工具
启动工具 所有工具

关于此工具

CSS 优先级计算器可以输入任意 CSS 选择器，即时查看其优先级分数，分解为 ID、类和元素三个维度。支持两个选择器的并排对比，自动检测优先级胜出方，还提供常用选择器示例和优先级规则参考。

主要功能

快速预览

使用场景

css specificity selector

常见问题

什么是 CSS 优先级？

CSS 优先级是一种评分系统，用于确定当多个选择器指向同一元素时，哪些 CSS 规则会生效。它根据选择器类型计算权重：ID 选择器权重最高，其次是类和属性选择器，最后是元素选择器。

优先级是如何计算的？

优先级以三部分分数（ID、类、元素）计算。每个 ID 选择器在 ID 列加 1，每个类、属性或伪类选择器在类列加 1，每个元素或伪元素选择器在元素列加 1。

!important 会覆盖优先级吗？

是的，!important 声明会覆盖所有常规优先级计算。当多个 !important 规则冲突时，优先级更高的那个生效。内联样式也会覆盖所有基于选择器的优先级。

可以并排对比两个选择器吗？

可以，工具提供了并排对比面板，您可以输入两个选择器并即时查看哪个优先级更高。分数更高的选择器旁边会自动显示胜出标记。

计算器支持哪些选择器类型？

计算器支持 ID 选择器、类选择器、属性选择器、伪类选择器（如 :hover 和 :nth-child）、元素选择器和伪元素选择器（如 ::before 和 ::after）。还提供常用示例，点击即可填入。

相关工具

JSON 验证器颜色选择器哈希生成器UUID 生成器