CSS 特异性计算器
计算一个或多个选择器的 CSS 特异性，以 (A, B, C) 三元组表示 — ID、class/attribute/pseudo-class 和 type/pseudo-element 的计数 — 用于调试样式规则为什么不生效。
输入
输出
| 选择器 | ID | 类 | 类型 | 特异性 |
|---|---|---|---|---|
| No data yet | ||||
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-specificity-calculator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"selectors": "#header"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-specificity-calculator` tool (CSS Specificity Calculator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-specificity-calculator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS 特异性计算器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
什么是 CSS 特异性？
当两个 CSS 规则针对同一个元素并设置相同的属性时，浏览器需要一个决胜方案来决定哪个规则生效。这个决胜方案就是特异性 — 一个根据选择器本身计算的分数，而不是根据规则在样式表中的位置（那仅在特异性相等时才作为最终决胜方案）。一个更具体的选择器总是会击败一个不太具体的选择器，无论哪个规则最后编写。
(A, B, C) 系统
特异性用三个数字表示，从左到右像版本号一样比较 — A 中的任何差异都会覆盖 B 中的任何差异，而 B 中的任何差异又会覆盖 C 中的任何差异：
- A — ID 选择器。 选择器中的每个
#id都会加 1。 - B — 类、属性和伪类。 每个
.class、[attr]或:hover风格的伪类都会加 1。 - C — 类型和伪元素。 每个标签名（
div、a）以及每个伪元素（::before、::after和传统的单冒号形式:before/:after/:first-line/:first-letter）都会加 1。
通用选择器（*）和组合器（ 、>、+、~）始终贡献零分 — 它们缩小匹配的内容，而不是匹配的具体程度。所以 #header 得分为 (1, 0, 0)，.nav a:hover 得分为 (0, 2, 1)（两个类似类的选择器，一个类型），而 .btn.btn-primary — 同一元素上的两个类 — 得分为 (0, 2, 0)，击败单类规则，即使它是"相同类型"的选择器。
:not() / :is() / :has() 陷阱
现代 CSS 通过其最具体参数的特异性对 :not()、:is() 和 :has() 进行计分，而不是作为一个平面伪类。这个计算器改用更简单的、前 Selectors-4 时代的近似方法：这些中的每一个（以及任何其他函数伪类，如 :nth-child()）都计为单个伪类 — 无论括号内是什么，B 都是平面的 +1。这是一个有文档记录的范围削减，而不是一个错误：它保持解析器简单，对常见情况（单个、非嵌套的参数）是准确的，但会低估包装内部有 ID 的 :not()。根据规范，:where() 始终得分为零，无论其内容如何。
如何使用
每行粘贴一个 CSS 选择器 — 可以简单如 .btn，也可以复杂如 #main .content > p::before:hover。每一行都会获得自己的行，其中包含 ID、类和类型的计数以及组合的 (A, B, C) 分数。随着您的输入，结果会实时更新。
FAQ
为什么 div > p::before 击败 #main... 还是没有击败？ 没有击败 — ID (A) 总是会击败任何数量的类型选择器或伪元素 (C)，这是三个数字比较方式的定义。
如果特异性相等，规则的顺序重要吗？ 重要 — 当两个规则具有相同的特异性时，在级联中稍后出现的（或稍后加载的）那个规则会生效。!important 完全覆盖特异性，而内联 style="" 属性会覆盖任何基于选择器的规则。
这处理像 .a, .b 这样的选择器列表吗？ 对于每个选择器的细分分析，将每个逗号分隔的组视为自己的一行 — 选择器列表将其规则独立应用于每个选择器，每个都可以有不同的特异性。
隐私
解析和计分完全在您的浏览器中进行。您粘贴的选择器永远不会被上传或存储。