使用方法
- 按样式表中的写法，在 选择器 中输入一个选择器。
- 在 第二个选择器（可选） 中输入另一个选择器进行比较，或者留空。
- 查看 特异性（a、b、c）；如果输入了两个选择器，再查看 哪条规则胜出。
- 用 计入的部分 表格查看每个选择器的哪一部分得到了每个数。
三个数如何计算
CSS 选择器第3级推荐标准（英文）把选择器按三列计数。本工具从左到右比较：先比 a，再比 b，最后比 c。通配符 * 以及 > 、+ 等组合符不计入。
- a 是 ID 选择器的个数，例如 #nav。
- b 是类选择器（如 .active）、属性选择器（如 [href]）和伪类（如 :hover）的个数。
- c 是类型选择器（如 li 或 a）和伪元素（如 ::before）的个数。
带参数的伪类
:is()、:not() 和 :has() 按参数中最具体的那个选择器计算，因此 :is(#a, .b) 为 (1, 0, 0)。:where() 不计分。:nth-child() 计为一个伪类，再加上其 "of S" 列表中最具体的选择器，因此 :nth-child(even of li, .item) 为 (0, 2, 0)。这些规则来自CSS 选择器第4级草案（英文），该草案仍是编辑草案，可能会变动。
本工具不做的事
- 它把带参数的伪元素（如 ::part(x)）计为一个伪元素，不读取其参数。
- 它不读取 & 嵌套写法，一次只接受一个选择器，不接受带逗号的列表。
- 它看不到您的样式表，因此两者特异性相同时，它只说明位置靠后的规则胜出，顺序需要您自己核对。
示例：导航栏中的一个链接
第一个选择器 #nav li.active > a:hover 有一个 ID，即 #nav。它有两个类和伪类，即 .active 和 :hover，还有两个类型选择器，即 li 和 a。它的特异性为 (1, 2, 2)。第二个选择器 #nav a 有一个 ID 和一个类型选择器，因此其特异性为 (1, 0, 1)。两者的 a 相同，而第一个的 b 和 c 更高，所以第一个选择器胜出。
| 选择器 | a | b | c |
|---|---|---|---|
| #nav li.active > a:hover | 1 | 2 | 2 |
| #nav a | 1 | 0 | 1 |
常见问题
为什么 ID 计入第一列？
本工具从左到右比较各列，因此先决定的是 ID 所在的 a 列。ID 多一个的选择器 a 更高，此时就不再比较 b 和 c 中的类和类型。
规则的顺序重要吗？
只有在两个选择器的特异性相同时才重要。CSS 层叠第4级规范（英文）规定，此时文档顺序中最后的声明生效，即位置靠后的规则胜出。
为什么 :not(#a) 会增加特异性？
伪类 :not() 本身不计数，但它的参数要计数。选择器第3级的例子 #s12:not(FOO) 为 (1, 0, 1)：ID 来自 #s12，参数 FOO 提供一个类型选择器。
通配符和组合符会增加特异性吗？
不会。通配符会被忽略，> 、+ 和 ~ 等组合符也一样。第3级规范中的例子 * 的特异性为 (0, 0, 0)。
本工具会计入内联样式和 !important 吗？
不会，它只计算一个选择器。层叠先比较来源和重要性，再比较特异性，因此标记为 !important 的规则或内联样式无论选择器得分多少都可能胜出。请只比较设置同一属性且重要性相同的两个选择器。
我输入的选择器会被发送到什么地方吗？
不会。解析在您的浏览器中完成，您输入的内容不会被保存或发送到我们的服务器。修改样式表前，请先核对结果。
资料来源
数据和文字最近核对于2026年11月12日星期四。