无需登录 数据私有 本地保存

CSS选择器优先级计算器 - 层叠权重比较

17
0
0
0

CSS 选择器优先级计算器

输入任意 CSS 选择器，实时计算其层叠权重（Specificity），支持多选择器并行比较，直观理解优先级规则。

输入选择器： 支持 ID、类、属性、伪类、伪元素、组合器及函数伪类
最多支持 4 个选择器同时比较
示例：

在上方输入 CSS 选择器，查看权重计算结果

CSS 选择器优先级 - 常见问题与知识点

CSS 选择器优先级（Specificity，也称"特指度"或"权重"）是浏览器决定哪个 CSS 规则应用于元素的算法。当多条规则指向同一元素时，优先级最高的规则胜出。权重采用 a-b-c-d 四元组格式：a（内联样式，通常为0或1）、b（ID选择器数量）、c（类/属性/伪类数量）、d（元素/伪元素数量）。比较时从左到右逐位比较，高位大的直接胜出。

选择器类型权重贡献示例
内联样式(1,0,0,0)style="color:red"
ID 选择器(0,1,0,0)#header
类选择器(0,0,1,0).container
属性选择器(0,0,1,0)[type="text"]
伪类(0,0,1,0):hover、:nth-child(2)
元素选择器(0,0,0,1)div、p
伪元素(0,0,0,1)::before、::first-line
通配符 *(0,0,0,0)*
组合器（+ > ~ 空格）不贡献权重div > span

注意：:not()、:is()、:has() 内部选择器的权重会正常计算（取最大值），而 :where() 内部权重始终为 0。

ID 选择器的优先级远高于类选择器。权重比较是按位比较而非累加数值。一个 ID 选择器贡献 (0,1,0,0)，一个类选择器贡献 (0,0,1,0)。无论有多少个类选择器（例如 100 个），其权重 (0,0,100,0) 在第二位上仍是 0，无法超过 ID 选择器在第二位的 1。因此，永远无法用类选择器的数量来覆盖一个 ID 选择器。这也是为什么建议在 CSS 架构中尽量避免使用 ID 选择器来控制样式。

!important 是 CSS 声明级别的标记，不属于选择器权重体系。它作用于属性声明（如 color: red !important），会覆盖所有非 !important 的声明，无论选择器权重多高。当两个声明都带有 !important 时，才回到选择器权重比较。优先级从低到高依次为：用户代理样式 → 普通用户样式 → 普通作者样式 → 作者 !important → 用户 !important。过度使用 !important 会导致样式难以维护，应谨慎使用。

  • :not()：伪类本身不贡献权重，但内部选择器的权重会计入。例如 :not(#id) 权重为 (0,1,0,0)。
  • :is()：取参数中权重最高的选择器作为整体权重。例如 :is(.a, #b, div) 权重为 (0,1,0,0)（取 #b 的权重）。
  • :has()：与 :is() 类似，取参数中最高权重。例如 :has(> .child) 权重为 (0,0,1,0)。
  • :where()：始终为 0 权重，内部选择器不贡献任何权重。非常适合用于可被轻易覆盖的基础样式。
  • :nth-child()、:lang() 等普通伪类：伪类本身权重为 (0,0,1,0)，内部表达式不影响权重。

当两个规则的选择器权重完全相同时，遵循"后来居上"原则——在源代码中后出现的规则会覆盖先出现的规则。这也称为"源码顺序"（Source Order）。如果两个规则分别位于不同的样式表中，则最后加载的样式表中的规则优先。这也解释了为什么将自定义样式放在最后引入可以覆盖框架/库的默认样式（前提是权重相同）。
🔧 相关工具