计算 CSS 优先级，判断哪条规则生效
粘贴选择器即可统计优先级，或粘贴 CSS 和元素，查看实际生效的规则。
- 在您的设备上运行
- 无需注册
- 访问过一次后可离线使用
模式
不包含浏览器默认样式和其他样式表。内容不会发送到任何地方。
| 选择器 | 优先级 | 权重 | 上下文 |
|---|
| 规则 | 值 | 优先级 | 层 | 结果 |
|---|
如何判断哪条 CSS 规则生效
- 选择模式：统计选择器，或查找生效的规则。
- 粘贴选择器，或粘贴 CSS、元素的 HTML 以及属性。
- 查看分值，或胜出的规则以及其他规则落选的原因。
常见问题
优先级是怎么计算的？
每个 id 计 1,0,0，每个类、属性选择器或伪类计 0,1,0，每个元素名或伪元素计 0,0,1。通配选择器和 :where() 不计分。
:is()、:not() 和 :has() 怎么计分？
它们按其中分值最高的参数计分。因此 :is(#a, .b) p 的分值为 1,0,1，因为 #a 是 :is() 内最强的部分。规则 :where(#a) p 的分值为 0,0,1。
为什么带层的规则会输给不在层中的规则？
对于普通声明，层外的规则优先于层内的规则。对于 !important，顺序相反，因此较早的层会胜出。普通的 style 属性优先于所有普通样式表规则，!important 的 style 属性则优先于其他所有 !important 规则。
我的 CSS 会被发送出去吗？
不会。你的浏览器在当前标签页中解析并匹配选择器，任何内容都不会发送到服务器。
评价
还没有评价。快来抢先评价。