01
按列而不是按总分比较
先看 ID，再看类与属性，最后看元素；一个 ID 不会被许多类“加分”反超。同分排序会保留原输入顺序。
CSS 选择器工具
CSS 优先级计算器
每行输入一个选择器；顶层逗号列表会拆成独立结果。需要时再打开本地 HTML 匹配。
CSS 优先级计算器
每行一个选择器；顶层逗号会拆开。
输入选择器开始。
选择器和可选 HTML 仅在本地处理，解析过程不会获取外部资源。
选项
输入已变，旧结果已过期。
样式没有按预期覆盖时，先用 CSS 优先级计算器拆开 ID、类、元素三列，比背诵“百位、十位、个位”更可靠。这里的 CSS 选择器权重是三元组，不是可以进位的整数。
把两个选择器放在一起做 CSS 优先级比较，再按需粘贴 HTML 片段检查是否匹配。CSS 选择器优先级与实际层叠生效分开显示，避免误把最高分当最终答案。
为什么用 CSS 优先级计算器
看清伪类的真实贡献
:is(#dialog, .panel) 会取参数中最高的权重，:where(#dialog, .panel) 却始终贡献零。CSS 优先级计算器逐项列出贡献，便于找出那个意外抬高权重的 ID。
把匹配与权重分开看
#missing 的分值可能很高，但在当前 HTML 片段里没有匹配；.card 分值较低，却匹配到元素。两个结果并列，避免把“匹配零个”误读成“优先级为零”。
三步读懂比较结果
02
用相同参数试两种伪类
把相同列表分别放进 :is() 与 :where()。前者取最高参数分值，后者为零；:nth-child(... of S) 还会额外计入自身伪类。
03
仅在需要时打开片段匹配
粘贴静态 HTML 片段后查看匹配数量。这个结果不模拟 hover、focus 或伪元素，也不推断最终哪个声明生效。
比较表会告诉你什么
A-B-C 逐项拆解
每个选择器分别显示 ID、类/属性/伪类、元素/伪元素的数量，并列出贡献片段。
列表独立计分
顶层逗号分隔的分支逐条显示；可保留输入顺序，也可按权重降序，等分保持原顺序。
本地片段匹配
可选 HTML 在无脚本的解析树中查找匹配节点，不打开图片、样式表或外部网址。
计算结果的适用边界
- 不是完整层叠裁决
- 实际 CSS 生效还取决于来源、层、!important、属性、作用域与源码顺序。这里只比较选择器分值。
- 行内样式不属于三列
- 行内 style 和 !important 不应加进 A-B-C；它们属于选择器计分以外的层叠步骤。
- 逗号列表没有统一总分
- 每个分支各有权重，也可能分别匹配不同元素。工具会拆开显示，不选一个“整组分值”。
- 零匹配不等于零权重
- 静态片段里没有节点，不能否定选择器的分值；hover、focus 状态和伪元素渲染也不在匹配模拟范围内。
CSS 优先级计算器常见问题
CSS 选择器的优先级如何计算？
ID 计入第一列，类、属性与伪类计入第二列，元素与伪元素计入第三列；从左到右比较，不按十进制求和。
为什么 :where() 的优先级是零？
:where() 及其参数恒为零，它适合写易于覆盖的基础规则；同样参数放进 :is() 则会取最高分。
为什么 :is() 内的 ID 会提高优先级？
:is() 自身不额外加分，但其参数列表中若有 ID，最高参数就可能把整项提升到 ID 列。
两个选择器优先级相同时怎么办？
分值相同只说明优先级这一关平局；真实层叠还要看来源、层、重要性、作用域和源码顺序。
!important 和行内样式会影响选择器权重吗？
不会。!important 与行内 style 不属于选择器权重三元组，本页只计算选择器文本。
发现选择器计分有误？