CSS 优先级计算器

分析并比较 CSS 选择器的优先级。

浏览器本地处理 无需注册 开发者

将 CSS 选择器的 specificity 估算为 ID、类/属性/伪类、元素/伪元素三个数字,并可比较两个选择器。

如何计算 CSS specificity

  1. 输入一个选择器并计算三元组。
  2. 或在比较模式中输入选择器 A 和 B。
  3. 从左到右比较三元组,查看哪个选择器更强。

计算方式与注意事项

这是简化解析器,不是完整 CSS parser。它统计 ID、类/属性/伪类以及元素/伪元素。

`:where()`按0处理;`:not()`、`:is()`、`:has()`会把内部内容展开统计,因此复杂 selector list 可能与 CSS 规范只取最高 specificity 参数的规则不同。

隐私与限制

所有分析都在浏览器本地完成。它适合快速估算常见选择器,不应视为覆盖所有现代 CSS 边界情况的权威解析器。

CSS specificity 常见问题

(1,2,3)表示什么?

表示1个ID贡献、2个类/属性/伪类贡献和3个元素/伪元素贡献。

:where()会增加 specificity 吗?

在本工具中不会。

:is()、:not()、:has()完全符合规范吗?

不完全。简化实现可能在复杂列表中多计。

会考虑源码顺序吗?

不会,只比较 specificity,不判断 cascade 顺序或 !important。

会读取整个 CSS 文件吗?

不会,只分析输入的选择器文本。