不喜欢广告？ 去 无广告 今天
CSS 特异性计算器
颜色开发人员
广告 移除？
广告 移除？
指导
CSS 特异性计算器
CSS特异性计算器可以帮助您确定任何CSS选择器的确切特异性分数。理解特异性对于调试CSS冲突和编写可维护的样式表至关重要。输入一个或多个选择器，即可立即看到它们的(a,b,c)分数并进行并排比较。
如何使用
在输入字段中每行输入一个CSS选择器。该工具将自动计算并显示每个选择器的特异性分数。当输入多个选择器时，特异性最高的选择器将以绿色高亮显示，以便您快速查看哪个规则获胜。
特征
- 符合W3C标准的评分 – 使用官方的(a,b,c)算法计算特异性：ID、类/属性/伪类，以及元素/伪元素。
- 多选择器比较 – 输入多个选择器以比较它们的特异性分数，并查看哪个选择器获胜。
- CSS选择器级别4 – 支持现代伪类如 :is()、:not()、:has() 和 :where()，并正确处理特异性。
- 视觉分数显示 – 颜色编码的分数徽章和比例条使您能够一目了然地理解特异性。
- 客户端处理 – 所有计算都在您的浏览器中完成。不会将任何数据发送到服务器。
广告 移除？
常问问题
-
什么是CSS特异性以及它是如何计算的？
CSS特异性是一种权重系统，用于确定当多个规则针对同一元素时，哪个CSS规则生效。它被计算为一个三部分分数（a,b,c）：a计数ID选择器，b计数类选择器、属性选择器和伪类，c计数元素选择器和伪元素。在较早位置的更高分数总是获胜，无论后续位置如何。
-
:is()、:not() 和 :has() 如何影响特异性？
根据CSS选择器级别4，:is()、:not() 和 :has() 伪类的特异性等于其参数列表中最具体选择器的特异性。例如，:is(.foo, #bar) 的特异性为#bar（1,0,0），因为它是最具体参数。:where() 伪类是例外——它始终不贡献特异性。
-
当特性相等时，CSS规则的顺序是否重要？
是的。当两个选择器具有完全相同的特异性分数时，会应用CSS级联规则：在源代码中出现较晚的规则获胜。这就是为什么理解特异性很重要——仅依赖源顺序可能导致脆弱的样式表，当规则被重新排序时就会失效。
-
为什么ID选择器会覆盖多个类选择器？
特异性算法从左到右逐位比较分数。ID选择器得分为(1,0,0)，而任何数量的类选择器仅增加第二位置。由于位置a在位置b之前被比较，因此即使只有一个ID选择器，它也会始终覆盖任何类、属性或伪类选择器的组合，无论其数量多少。
