CSS 选择器特异性计算器
免费线上 CSS 选择器特异性计算器。粘贴一或两个选择器，看它们的 (a, b, c) 权重、哪条胜出，以及你的样式为何没生效。
CSS 选择器特异性计算器
免费线上 CSS 选择器特异性计算器。粘贴一或两个选择器，看它们的 (a, b, c) 权重、哪条胜出，以及你的样式为何没生效。
关于 CSS 特异性
特异性决定什么
当两条 CSS 规则指向同一个元素、又设定同一个属性时，浏览器需要一个裁判：特异性。每个选择器得到一个以三个数字 a, b, c 表示的权重。由左而右比较，高者胜。只有完全相同时，才由源码顺序（或 !important）决定。这就是为什么一条更具体的规则会悄悄盖掉你刚写的那条。
三个栏位
a 栏数 ID 选择器，b 栏数 class、属性与 pseudo-class，c 栏数元素类型与 pseudo-element。通用选择器、组合子与 :where() 不加分。:is()、:not()、:has() 贡献其内部最具体参数的特异性。本工具替每个 token 标色，让你看见它灌进哪一栏。
常见问题
关于这个主题的常见疑问与实用解答。
为什么我的 CSS 没生效？
通常是另一条指向同一元素的规则特异性更高，所以就算你的写在后面也是它赢。把两个选择器粘进来比较 (a, b, c) 权重，就能看出是哪一栏决定的。
为什么 :where() 和 * 算 0？
:where() 就是设计成不加特异性，让里面的东西容易被覆盖。通用选择器 * 与组合子也不加分。相对地 :is() 与 :not() 会取其内部最具体参数的特异性。
我的选择器会被发送到服务器吗？
不会。所有解析与比较完全在你的浏览器中执行，你输入的任何内容都不会离开你的设备。