CSS 优先级计算器 - Free Online Tool | PivaBox

计算 CSS 选择器优先级 — 可视化 (a, b, c) 分解，支持对比模式和选择器解析

如何使用 CSS 优先级计算器

1. 在输入框中输入或粘贴一个 CSS 选择器 — 例如 ul li、.class、#id、.class1.class2，或复杂选择器如 div#id.class
2. 查看以可视化 (a, b, c) 分解显示的优先级结果 — ID（a）、类/属性/伪类（b）和元素/伪元素（c）— 总优先级值计算公式为 a*100 + b*10 + c
3. 可选择展开对比模式，输入第二个选择器以查看哪个选择器在 CSS 层叠中胜出。查看内联样式和 !important 说明以了解边缘情况。

Frequently Asked Questions

CSS 优先级计算器是免费的吗？

是的，PivaBox CSS 优先级计算器完全免费使用。没有任何费用、订阅或隐藏收费。所有计算均在您的浏览器中本地运行。

优先级是如何计算的？

优先级以三分量值 (a, b, c) 计算，其中 <strong>a</strong> 计算 ID 选择器，<strong>b</strong> 计算类选择器、属性选择器和伪类，<strong>c</strong> 计算类型选择器和伪元素。总值为 a*100 + b*10 + c。值越高，在层叠中的优先级越高。

!important 和内联样式如何处理？

内联样式（HTML 元素上的 style 属性）始终覆盖样式表规则，无论优先级如何。!important 标志会覆盖正常的优先级规则 — !important 规则优于非 !important 规则。当两个 !important 规则冲突时，正常的优先级规则决定胜者。该工具包含说明来解释这两种边缘情况。