浏览器如何决定应用哪条规则
当两条规则为同一元素设置同一属性时，浏览器会比较由三个数字组成的优先级：第一位统计 ID 选择器，第二位统计类、属性选择器和伪类，第三位统计元素名和伪元素。三组按顺序比较，因此一个 ID 会胜过任意数量的类。通配选择器和连接符不贡献权重；:where() 恒为零；:is()、:not() 和 :has() 取其参数中最高的优先级。本工具按这些规则计算，并标出每一分来自哪个片段。
如何使用计算器
- 1输入或粘贴一个选择器。请逐个输入，因为逗号分隔的选择器列表没有统一的优先级。
- 2查看三列数值，了解它包含多少 ID、类级选择器和元素级选择器。
- 3查看下方的片段拆解，确认每一分具体由选择器的哪一部分贡献。
- 4输入竞争选择器，判断二者谁会胜出、在哪一组分出胜负。
- 5如果两者相同，请记住样式表中靠后的规则胜出，此时调整顺序可能比堆叠权重更合适。
CSS 优先级计算器 — 选择器权重与对比的常见使用场景
快速完成日常任务
无需安装桌面软件，打开网页即可处理常见的文本、图片、数据或格式转换任务。
检查与整理内容
在提交文件、发布内容或复制结果之前，快速发现格式问题并获得结构清晰的输出。
注重隐私的浏览器处理
对于支持本地运行的工具，数据会留在当前浏览器中，不需要上传到第三方服务。
常见问题
行内样式和 !important 处于什么位置？
它们不在这三个数字之内。行内 style 属性胜过任何选择器，!important 则无视优先级胜过普通声明。由于二者会短路层叠机制，会让样式更难被后续覆盖，在共享代码中应尽量避免。
为什么 :where() 计为零？
这正是它的设计目的。:where() 让组件库可以匹配复杂结构而不增加任何权重，业务代码用一个简单选择器就能覆盖。:is() 写法相似，但会取其参数中最高的权重。
后代选择器链中的元素数量重要吗？
只影响第三组。div span a 计为三个元素选择器，仍然输给一个类。>、+、~ 等连接符完全不增加权重，通配选择器 * 同样如此。
为什么不能输入选择器列表？
逗号分隔的列表是多个彼此独立的选择器，各自单独匹配和计分，整个列表没有统一的优先级。因此工具要求逐个输入，以免给出有误导性的数值。