Developer Tools
Design ToolsCSS 特异性计算器
粘贴 CSS 选择器，即时查看其特异性分数并排列对比。了解哪些规则优先生效及原因——按权重排名。
CSS 选择器
快速示例
特异性结果
特异性计算为 (a, b, c)
在上方输入 CSS 选择器以查看其特异性分数。
a
ID
#id
b
类 / 属性 / 伪类
.class [attr] :hover
c
元素 / 伪元素
div p ::before
相关工具
关于 CSS 特异性计算器
工作原理
- 在输入区域输入一个或多个 CSS 选择器，每行一个
- 工具解析每个选择器并计算 ID、类/属性/伪类和元素
- 特异性显示为三部分分数：(a, b, c)
- 选择器自动从最高到最低特异性排名
- 点击'复制结果'将完整特异性表复制到剪贴板
- 使用比较了解哪些选择器会覆盖其他选择器
常见使用场景
- 通过比较选择器权重调试 CSS 覆盖问题
- 交互式学习 CSS 特异性规则
- 在向样式表添加新样式之前审查选择器
- 向开发人员或学生讲授 CSS 特异性
- 优化选择器特异性以减少对 !important 的需求
- 快速检查样式冲突时哪个规则胜出
常见问题
什么是 CSS 特异性？
CSS 特异性是分配给 CSS 选择器的权重，用于确定当多个规则匹配同一元素时应用哪个样式规则。它表示为三部分值 (a, b, c)，其中 a 计算 ID 选择器，b 计算类/属性/伪类选择器，c 计算元素类型和伪元素选择器。
特异性如何计算？
特异性通过计算选择器中的三个类别来计算：(a) ID 选择器如 #header，(b) 类选择器 (.card)、属性选择器 ([type="text"]) 和伪类 (:hover, :nth-child)，以及 (c) 类型选择器 (div, p) 和伪元素 (::before)。通用选择器 (*) 和组合符 (+, ~, >) 没有特异性。
两条规则冲突时哪个选择器胜出？
特异性较高的选择器胜出。从左到右比较 (a, b, c) 值：更多 ID (a) 总是胜过更多类 (b)，更多类总是胜过更多元素 (c)。如果特异性相等，则样式表中后出现的规则胜出。
此工具中的特异性分数有什么用？
数值分数是用于排名选择器的简化可比值 (a * 10000 + b * 100 + c)。它不应被解释为字面上的 CSS 值——CSS 特异性不是单一数字，而是三部分比较。
!important 会影响特异性吗？
!important 本身不是特异性的一部分——它覆盖所有其他声明，无论特异性如何。此工具仅计算选择器特异性，不考虑 !important 的效果。避免在生产 CSS 中使用 !important；应优先使用更具体的选择器。
通用选择器 (*) 有特异性吗？
没有。通用选择器 (*) 的特异性为零 (0, 0, 0)。组合符 (+, >, ~, 空格) 也不会增加特异性。只有 ID、类、属性、伪类、元素和伪元素选择器才会增加特异性。
:not() 如何影响特异性？
:not() 伪类本身没有特异性，但其中的选择器有。例如，:not(#id) 向特异性贡献 (1, 0, 0)（一个 ID）。此工具通过解析括号内的参数来正确处理 :not()。
:: 和 : 对伪元素有什么区别？
:: 是伪元素的现代双冒号语法 (::before, ::after, ::placeholder)。单冒号的旧式语法 (:before, :after) 仍然被浏览器支持但已被弃用。两者都会将 c（元素/伪元素）计数加 1。
内联样式与选择器相比如何？
内联样式（如 style="color: red"）的特异性为 (1, 0, 0, 0)——高于任何选择器——表示为此工具未涵盖的第四个类别。实际上，内联样式总是覆盖同一属性的样式表规则（除非使用 !important）。
我可以比较具有相同特异性分数的选择器吗？
可以。当两个选择器具有相同的 (a, b, c) 值时，在源顺序中后出现的那个胜出。当分数相同时，此工具以相同排名显示它们，您可以查看 (a, b, c) 分解来确认它们在权重上真正等效。
为什么应该在 CSS 中最小化特异性？
高特异性使样式更难覆盖和维护。当您需要覆盖样式时，您必须编写更具体的选择器或使用 !important。保持低特异性使您的 CSS 更加模块化和可预测，特别是在大型代码库或组件库中。
此工具支持所有 CSS 选择器类型吗？
此工具支持最常见的 CSS3 选择器，包括 ID、类、属性、伪类（包括 :not()）、伪元素和类型选择器。复杂的现代选择器如 :is()、:where()、:has() 可能无法完全解析。