CSS 选择器特异性计算器
免费在线 CSS 特异性计算器。输入一或两个选择器，拆解 (a, b, c) 权重并比较特异性；结果不代表页面实际应用的样式。
CSS 选择器特异性计算器
免费在线 CSS 特异性计算器。输入一或两个选择器，拆解 (a, b, c) 权重并比较特异性；结果不代表页面实际应用的样式。
关于 CSS 特异性
特异性决定什么
特异性是 CSS 级联的其中一步。同一元素、同一属性的声明，会先比较来源、重要性（!important）与级联层（layer）。这些及其他更高优先条件一致时，才从左到右比较选择器的 (a, b, c) 权重。权重相同时，还可能先比较作用域接近程度，再看源码顺序。
三个栏位
a 栏数 ID 选择器，b 栏数 class、属性与 pseudo-class，c 栏数元素类型与 pseudo-element。通用选择器、组合子与 :where() 不加分。:is()、:not()、:has() 贡献其内部最具体参数的特异性。本工具替每个 token 标色，让你看见它灌进哪一栏。
这个比较涵盖什么
每个字段请输入单个有效选择器。工具不检查 DOM 匹配、声明中的 !important、内联样式或 layer，因此无法判定实际应用的样式。若输入逗号分隔的选择器列表，显示的是列表最高权重，不是匹配某个元素的选择器权重。无效输入可能显示 (0, 0, 0)，不代表它是有效的零特异性选择器。
常见问题
关于这个主题的常见疑问与实用解答。
为什么我的 CSS 没生效？
特异性只是可能原因之一。请先用浏览器开发者工具确认选择器是否匹配元素、声明是否有效，以及媒体查询等条件是否成立，再检查 !important、layer、内联样式等级联条件。本工具只比较选择器权重，不会检查你的页面或判定实际应用的样式。
为什么 :where() 和 * 算 0？
:where() 就是设计成不加特异性，让里面的东西容易被覆盖。通用选择器 * 与组合子也不加分。相对地 :is() 与 :not() 会取其内部最具体参数的特异性。
我的选择器会被发送到服务器吗？
工具在你的浏览器内解析与比较选择器，不会将它们发送到服务器计算。
!important 和 layer 会改变 (a, b, c) 吗？
不会。它们影响级联优先顺序，不会增加选择器的特异性，所以 (a, b, c) 更大不保证声明胜出。以作者样式表中的声明为例，普通声明以后面的 layer 优先，重要声明则以前面的 layer 优先；未分层的普通声明优先于分层声明，重要声明的顺序相反。