CSS 优先级计算器
分析并比较 CSS 选择器的优先级。
将 CSS 选择器的 specificity 估算为 ID、类/属性/伪类、元素/伪元素三个数字,并可比较两个选择器。
如何计算 CSS specificity
- 输入一个选择器并计算三元组。
- 或在比较模式中输入选择器 A 和 B。
- 从左到右比较三元组,查看哪个选择器更强。
计算方式与注意事项
这是简化解析器,不是完整 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 文件吗?
不会,只分析输入的选择器文本。