CSS 优先级计算器
即时计算 CSS 选择器优先级，输出 (a, b, c) 元组。支持多选择器对比，可视化展示 ID、类、元素权重。免费浏览器端工具。
使用方法
- 在输入框中输入 CSS 选择器，例如
#nav .item:hover。 - 优先级元组
(a, b, c)和彩色分项说明会立即显示。 - 如需对比多个选择器，用逗号分隔：
#nav .item, .item:hover。 - 点击任意结果旁的复制按钮，即可将元组复制到剪贴板。
理解 (a, b, c) 元组
- a — ID：每个
#id选择器加 1。 - b — 类 / 属性 / 伪类：每个
.class、[attr]或:伪类加 1。 - c — 元素 / 伪元素：每个标签名或
::伪元素加 1。
从左到右对比。第一个不同的列决定胜负。(1,0,0) 始终胜过 (0,99,99)。
常见示例
*→(0, 0, 0)p→(0, 0, 1).class→(0, 1, 0)#id→(1, 0, 0)#id .class:hover→(1, 2, 0)div > p + span::before→(0, 0, 4)
FAQ
什么是 CSS 优先级？
CSS 优先级决定当多条规则作用于同一元素时哪条规则生效。用三元组 (a, b, c) 表示：a 计算 ID 选择器数量，b 计算类/属性/伪类选择器数量，c 计算元素类型和伪元素选择器数量。
优先级如何计算？
a = ID 选择器数量（#id）。b = 类（.class）、属性（[attr]）、伪类（:hover）选择器数量。c = 元素类型（div、span）和伪元素（::before）选择器数量。通配符（*）和连接符（+、>、~）不计入优先级。
如何对比两个选择器的优先级？
用逗号分隔两个选择器输入。工具会并排显示各选择器的优先级元组。从左到右逐列对比，第一个不同列的值大者获胜。
:not()、:is()、:has() 如何计算？
:not() 和 :is() 取其参数中优先级最高的选择器计算。:where() 始终为零优先级。:has() 使用其参数的优先级。本工具对这些伪类采用简化的单参数解析。
行内样式和 !important 算入其中吗？
行内样式（style 属性）高于 (a, b, c)，!important 可覆盖一切。本工具只计算选择器优先级，行内样式和 !important 不在计算范围内。