CSS 优先级计算器
开发
当两条 CSS 规则瞄准同一元素时，层叠会选优先级更高的一条——按 (ID, 类/属性/伪类, 类型/伪元素) 计数。本工具解析选择器，给每部分加权（#id +1·0·0、.class +0·1·0、div +0·0·1），再处理 :is()、:not()、:has()（取最高权重参数）和 :where()（恒为 0）这类伪类。粘贴两个选择器，看哪个赢得层叠以及差多少——不必再猜规则为什么没生效。
—
ID
1
类/属性/伪
2
类型/伪元素
3
优先级
(1, 2, 3)
Token 拆解
#navID+(1, 0, 0)ul类型+(0, 0, 1)li类型+(0, 0, 1).active类+(0, 1, 0)a类型+(0, 0, 1):hover伪类+(0, 1, 0)
对比两个选择器
粘贴第二个选择器，看哪个赢得层叠。
选择器 A
(1, 2, 3)
← A 胜
选择器 B
(0, 1, 3)
示例
Inline 样式、!important、源代码顺序都能压过选择器优先级。本工具只从选择器本身计算 (ID, 类, 类型) 元组。
使用方法
- 输入或粘贴 CSS 选择器——拆解随输入实时更新。
- 读 (ID, 类, 类型) 数字——元组更大者赢得层叠。
- 在对比框粘贴第二个选择器，看哪个胜出。
常见问题
- 为何是三个数字而不是一个？
- 优先级从左往右逐列比较：一个 ID 总是胜过任意多个类；一个类总是胜过任意多个类型选择器。像 (0,1,0) + (0,0,10) = 20 这样加起来，是 CSSWG 警告的经典错觉。
- :is()、:not()、:has() 怎么算？
- 取最高权重参数的优先级。:is(#a, .b) = 1·0·0、:not(.a, .b) = 0·1·0。:where() 恒为 0·0·0——零优先级覆盖很有用。
- ::before 这类伪元素呢？
- 伪元素（::before、::after、::first-line）按类型选择器计数（0·0·1）。遗留单冒号写法（:before、:after）也识别为伪元素。
- 包含 inline 样式吗？
- 不——inline 样式属于另一个 'a' 桶（1·0·0·0），本工具不建模，因为选择器里写不了 inline 样式。需要覆盖 inline 时用 !important。