CSS 优先级计算器

计算 CSS 选择器的优先级分数，理解层叠规则，调试样式冲突。

点击试用：

h1 .title

(0,0,1,1)

内联

类/属性/伪类

元素/伪元素

#main .nav > a:hover

(0,1,2,1)

内联

类/属性/伪类

元素/伪元素

CSS 优先级计算器与指南

CSS 优先级决定当多个规则针对同一元素时应用哪些样式。优先级由四个数字组成：内联样式、ID 数量、类/属性/伪类数量、元素/伪元素数量。理解优先级对于编写可维护的 CSS 至关重要。

什么是 CSS 优先级？

CSS 优先级是给每个选择器的权重，决定当多个规则应用于同一元素时哪些样式优先。分数越高越优先。

优先级如何计算？

优先级计算为 4 个值：内联样式、ID 数量、类/属性/伪类数量、元素/伪元素数量。

谁优先？

内联 > ID > 类/属性/伪类 > 元素。!important 覆盖所有优先级。

何时使用 !important？

谨慎使用 !important，它使 CSS 难以维护。

通配符选择器影响优先级吗？

不影响，* 的优先级为零。

评价此工具

3.7 / 5 · 68 人评价

获取每周开发技巧和新工具通知。

无垃圾邮件，随时退订。

Enjoy these free tools?