CSS 特异性计算器
在线计算 CSS 选择器特异性，比较选择器优先级，帮助调试 CSS 层叠问题
选择器对比
预设示例
常见陷阱
!important 覆盖一切
!important 声明会覆盖所有正常的 specificity 规则。即使 specificity 很高的选择器，也无法覆盖带 !important 的低 specificity 规则。
color: red !important;内联样式优先
直接写在 HTML 元素 style 属性中的样式（specificity 1,0,0,0）优先于任何外部 CSS 选择器，除非使用 !important。
<div style="color: red">:where() 特异性为零
:where() 伪类及其参数的 specificity 始终为 0。这使得它非常适合用作可被轻松覆盖的默认样式。
:where(.default) { color: gray }越多不一定越强
一个 ID 选择器 (#main) 的 specificity (0,1,0,0) 永远高于任意数量的类选择器（如 100 个 .class）。ID 在 specificity 中的权重最高。
#main > .class * .class