把任意 CSS 选择器算成 (a, b, c) 三元组,对比哪条规则在层叠中胜出,并指出是哪一位分出的胜负,浏览器本地
- 本地处理
- 分类 开发运维
- 适合 格式化、校验、压缩或检查和代码相关的文本。
#nav .item aul li.active:is(.promo, #hero) span.btn.btn如何提高 / 降低优先级
- 降优先级:用 :where() 包起来 —— `:where(#sidebar) .link` 算 (0,1,0) 而不是 (1,1,0)。设计系统里"可被随便覆盖的默认值"特别合适。
- 降优先级:别用 ID,改成类或 data 属性 —— `[data-nav] a`(0,1,1)比 `#nav a`(1,0,1)好覆盖得多。
- 提优先级:把选择器自己跟自己叠 —— `.btn.btn` 算 (0,2,0),不动 HTML、不加 !important 就压过单个 `.btn`。
- 提优先级:加一个你确定存在的属性选择器 —— `a[href]`(0,1,1)压过裸 `a`(0,0,1),但匹配的元素完全一样。
- 最后手段:!important 不看三元组直接赢,但两条都带 !important 时又退回普通优先级、再退回源码顺序。它只配做工具类覆盖,绝不能当默认写法。
这个工具能做什么
粘贴一个或多个 CSS 选择器,实时得到每个的优先级三元组 (a, b, c): a 是 ID 选择器的个数,b 是类 / 属性 / 伪类的个数,c 是元素 / 伪元素的个数。比较时一列一列从左往右比,a 相同才比 b,b 相同才 比 c,列与列之间从不进位:所以一个 `#x` (1,0,0) 永远压过叠了 一百个类的 (0,100,0),"256 个 class 进位成一个 ID"是上古浏览器 的讹传。工具把大家最容易算错的几处都处理对了::is() 和 :not() 取括号里最具体的那个成员,:where() 把里头的一切都清零(哪怕里面 写了 ID),::before / ::after 这类伪元素只加到 c 列而不是 b 列, [attr] 属性选择器计入 b,通配符 `*` 和组合器(`>` `+` `~` 后代 空格)一律不计。!important 不在三元组里,会单独标出来,它跳出 正常比较直接压过任何不带 important 的声明,但两条都带 !important 时又退回比优先级、再退回源码顺序。放进多条选择器并排,工具会 高亮哪条在层叠里胜出,并指出究竟是 a、b 还是 c 哪一位分出的胜负。 想给某条规则降权又不动 HTML?用 :where() 包住它的 ID;想抬权重 又不想加 !important?把类自己叠一遍(`.btn.btn` 算 (0,2,0))。 最近用过的选择器会本地记住,刷新后还在。全程 100% 浏览器本地, 不联网、不上传。
工具细节
- 输入
- 文本 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 9 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 开发运维 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
CSS 优先级计算器 适合怎么用
适合穿插在写代码、查问题、做 Review、上线前的小任务里。
适合开发场景
- 格式化、校验、压缩或检查和代码相关的文本。
- 把片段整理好再放进文档、工单、提交或交接材料。
- 不切换工具,快速检查一个小 payload。
开发检查项
- 压缩、混淆这类不可逆处理,先对副本操作。
- 除非确认工具本地处理,不要粘贴密钥和敏感片段。
- 转换后的代码上线前,仍要跑自己的测试或 lint。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
在 code review 里终结"我的样式怎么不生效"
同事的 `#sidebar .link { color: red }` 总是压过新写的 `.link--muted { color: gray }`,光看谁也说不清为啥。把两条 选择器各占一行粘进来,工具算出 (1,1,0) 对 (0,1,0),高亮 ID 那条胜出,并标明是 a 这一列(1 对 0)分出的胜负。修法就清楚 了:要么把 muted 那条的 a 列抬上去,要么(更好)把 sidebar 的 `#sidebar` 用 `:where()` 包起来,让它掉到 (0,1,0), 别再压后面每一条覆盖。粘两行比打开 devtools 还快地把这架吵完。
审一遍设计系统里"过重的默认值"
你在发组件库,希望每条基础样式使用方都能轻松覆盖。把基础选择器 批量粘进来:`.card`、`.card .title`、`#app .card`、 `nav ul li a`。任何一行算出来高于 (0,1,0) 都是将来的工单: 使用方不复制你的优先级就盖不掉。把重的几条用 `:where()` 改写 (比如 `:where(nav) ul li a` 算 (0,0,3),而不是带结构权重的 (0,0,4)),再粘一次确认三元组确实降下来了。
重构前先定夺用 :is() 还是 :where()
你想用 `:is()` 把五条几乎一样的规则合成一条省字节,但拿不准会不会 改变哪条声明胜出。把原来的 `.menu .a, .menu .b, .menu .c` 和 准备改成的 `.menu :is(.a, .b, .c)` 粘进来并排比,两者都落在 (0,2,0),说明这次重构对优先级无影响,可以放心上。要是你伸手去用 了 `:where()`,工具会显示它掉到 (0,1,0),提醒你这条规则刚刚变弱了。
用一个可分享链接给新人讲层叠
在 Slack 上讲优先级很费劲。输入几条对照用的选择器,让 URL 把它们 带上,把分享链接发过去。对方打开的是一模一样的对比:`#id` 压过 `.a.b.c.d.e`、`::before` 只加到 c 列、`:where()` 把一个 ID 清零, 逐项拆解的标签都已经渲染好了。这是一个活的实例,而不是一堵理论的 墙,而且对方还能改选择器验证自己的猜想。
加 !important 之前先预测谁会赢
在你伸手用 `!important` 强压样式之前,把当前胜出的那条规则和你的 新规则粘进来。如果你新规则的三元组本来就更高,那你根本不需要 `!important`,你需要的是一个更具体的选择器,工具会替你确认这一点。 如果两者打平,工具会告诉你源码顺序说了算,那么把你的规则在样式表里 挪到后面就干净地解决了。把 `!important` 留给那些你确认过"低三元组 确实抬不上去"的真实场景。
常见踩坑
把 `:where()` 当成有权重在算。`:where(#nav) .link` 是 (0,1,0),不是 (1,1,0),整个 `:where()` 参数贡献 0。要是你拿它当 `:is()` 用,就会算错谁胜出。看拆解标签:`:where()` 那个标签写着"永远 0"。
因为 `::before` 以冒号开头就把它塞进 b 列。伪元素(`::before`、`::after`、`::first-line`)加到 c(元素那一列),不是 b。只有伪类(`:hover`、`:nth-child()`)才进 b。双冒号就是它的标志。
以为组合器有权重。`div > p + span` 是 (0,0,3),`>` 和 `+` 都不计,只有三个元素名计数。后代空格和 `~` 也一样。它们影响"匹配到什么",从不影响"有多具体"。
以为 b 列堆大了能进位到 a。优先级在列与列之间从不进位。`.a.b.c…` 叠 100 个还是 (0,100,0),照样输给任意单个 `#id` 的 (1,0,0)。任何现代引擎里都没有 256 进位这回事。
隐私说明
整个计算器就是一个跑在你浏览器标签页里的 JavaScript 分词器, 选择器在页面上被切分、归类到 (a, b, c) 三列、排序,全程不联网。 没有任何东西在服务器上解析,也不记录你测过哪些选择器。唯一要 留意的:URL 分享状态会把你的选择器写进 query string (`?sel=...`),所以把分享链接粘到 Slack 或邮件时,这些选择器 会留在对方的访问日志里。CSS 选择器一般不敏感,但如果某个选择器 暴露了还没发布的组件名或内部 ID 命名规则、你不想被记录,那就 手动复制结果,别分享 URL。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。