分类: 开发工具
CSS 优先级计算器
以 A-B-C 分值比较选择器优先级
输入一个或多个 CSS 选择器，计算出它们的 ID-类-元素（A-B-C）优先级分值，并按优先级排序，一眼看出哪条规则会生效。全程在浏览器中完成。
| 选择器 | 优先级（A-B-C） | ID | 类、属性选择器、伪类 | 元素、伪元素 |
|---|---|---|---|---|
#nav .item > a:hover | 1-2-1 | 1 | 2 | 1 |
.card.featured | 0-2-0 | 0 | 2 | 0 |
button | 0-0-1 | 0 | 0 | 1 |
* | 0-0-0 | 0 | 0 | 0 |
本页的所有处理都在浏览器中完成，不会上传任何内容。
这个工具能做什么
当两条 CSS 规则作用于同一个元素时，生效的是优先级更高的那条，而不是写在后面的那条。优先级由三个数字组成：A 对应 ID 选择器，B 对应类、属性选择器和伪类，C 对应元素选择器和伪元素。这个工具会解析你输入的每个选择器，包括 :not()、:is()、:has()，以及优先级恒为零的 :where()，并给出对应的 A-B-C 分值，让你直接比较，而不必凭猜测判断。
使用方法
- 每行输入一个选择器，例如 #nav .item > a:hover。
- 查看每个选择器的 A-B-C 优先级分值。
- 按优先级排序，看清冲突时哪个选择器会生效。
隐私说明
本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。
常见问题
- 我的 CSS 会被上传吗？
- 不会。解析由页面里运行的 JavaScript 完成，私有样式表中的选择器不会离开你的设备。
- :not()、:is() 或 :has() 是怎么计分的？
- 按照 CSS 规范，它们取自身参数中优先级最高的那个来计分，而 :where() 无论内部写了什么，贡献的优先级永远是零。
- 内联样式或 !important 会影响这个分值吗？
- 不会。这个工具只计算选择器本身的优先级。内联 style 属性和 !important 都是直接整体覆盖正常的优先级判定，而不是叠加到 A-B-C 计数里。