css选择器优先级规则如何理解

内联样式权重最高为1000，ID选择器为100，类/属性/伪类为10，元素/伪元素为1，按四位数比较大小；!important强制生效但慎用；同权重后定义的覆盖先定义的。

CSS选择器的优先级决定了当多个样式规则作用于同一个元素时，哪一个规则会被应用。理解优先级的关键在于掌握不同选择器的权重计算方式，以及它们在冲突时如何比较。

选择器权重的计算方式

每个选择器都有一个权重值，浏览器通过比较这些值来决定使用哪个样式。权重由四部分组成（从高到低）：

• 内联样式：写在HTML标签中的style属性，如style="color: red;"，权重为 1000
• ID选择器：如#header，每个ID增加 100
• 类、属性选择器和伪类：如.class、[type="text"]、:hover，每个加 10
• 元素选择器和伪元素：如div、::before，每个加 1

权重按“四位数”方式比较，比如 0,1,0,0 > 0,0,10,0，即使后者数值相加更大也不行。

常见选择器权重示例

• div → 权重 1
• .nav → 权重 10
• #main-nav → 权重 100
• div.nav#item → 权重 1 + 10 + 100 = 111
• style="color:red" → 权重 1000

即使一个类选择器写了10次，也比不上一个ID选择器的权重。

立即学习“前端免费学习笔记（深入）”；

Chromox

Chromox是一款领先的AI在线生成平台，专为喜欢AI生成技术的爱好者制作的多种图像、视频生成方式的内容型工具平台。

184

查看详情

!important 的特殊地位

在声明后面加上 !important 可以让该样式无视优先级规则，强制生效。但应谨慎使用，因为它会破坏样式的可维护性。

• 多个 !important 存在时，仍会比较选择器权重
• 内联样式 + !important 最终胜出

同权重下后来者居上

如果两个规则的权重完全相同，那么后定义的样式会覆盖前面的。这个特性常被用于小范围调整样式，无需修改原始CSS文件。

基本上就这些。优先级不复杂，但容易忽略细节，特别是组合选择器的累加方式。多练习几个例子就能掌握。

以上就是css选择器优先级规则如何理解的详细内容，更多请关注php中文网其它相关文章！