css样式优先级由选择器权重、!important、源顺序等决定，权重高者生效；2. 权重按内联、ID、类/属性/伪类、标签依次降低，相同权重后定义覆盖前定义；3. 继承属性优先级低，易被显式声明覆盖；4. !important极大提升优先级，但应慎用；5. 层叠顺序决定最终表现，作者样式中后写规则覆盖先写。

在CSS中，样式优先级决定了当多个规则作用于同一个元素时，哪个规则最终生效。理解优先级机制对前端开发至关重要，尤其在处理复杂样式冲突时。

1. 基础优先级：选择器权重

CSS根据选择器的类型分配权重，权重高的规则覆盖权重低的。权重由四部分组成（0,0,0,0），从左到右依次为：

• 内联样式（如 style=”…”）：1,0,0,0
• id选择器（如 #header）：0,1,0,0
• 类、属性选择器和伪类（如 .class、[type=”text”]、:hover）：0,0,1,0
• 标签选择器和伪元素（如 div、::before）：0,0,0,1

计算示例：

div#main .text:hover → 权重 = 0,1,1,1
.header .title → 权重 = 0,0,2,0

权重越高，优先级越高。相同权重时，后定义的规则胜出（就近原则）。

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

2. 继承的影响

某些css属性会从父元素继承，比如 font-size、color、line-height。但继承的样式优先级非常低。

即使一个很弱的选择器（如标签选择器）设置了属性，也会覆盖继承值。例如：

body { color: blue; }
p { color: green; }

尽管 body 在结构上是祖先，但 p 显式设置了 color，因此段落文字为绿色，而非继承的蓝色。

3. !important 的特殊地位

在声明末尾添加 !important 可以提升该属性的优先级，使其几乎无视选择器权重。

怪兽智能全息舱

专业的ai数字人平台，定制数字人专属IP

0

查看详情

规则如下：

• 带 !important 的声明优先于不带的，无论选择器多强
• 当两个声明都带 !important 时，再按选择器权重和源码顺序决定

示例：

p { color: red !important; }
.highlight { color: yellow; }

即使 .highlight 权重更高，p 元素仍显示红色。

注意：!important 应谨慎使用，避免滥用导致维护困难。

4. 源顺序与层叠来源

当权重和 !important 都相同时，CSS的“层叠”规则起作用。层叠顺序从高到低为：

• 用户样式表中带 !important 的规则
• 作者样式表中带 !important 的规则
• 动画（@keyframes）中的正在执行的样式
• 作者样式表中的普通规则
• 用户样式表中的普通规则
• 浏览器默认样式（最弱）

同一来源下，后写的规则覆盖先写的。

基本上就这些。掌握权重计算、理解继承局限、慎用 !important，并留意层叠顺序，就能清晰掌控css样式的最终表现。