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 可以提升该属性的优先级，使其几乎无视选择器权重。
规则如下：
- 带 !important 的声明优先于不带的，无论选择器多强
- 当两个声明都带 !important 时，再按选择器权重和源码顺序决定
示例：
p { color: red !important; }.highlight { color: yellow; }
即使 .highlight 权重更高，p 元素仍显示红色。
注意：!important 应谨慎使用，避免滥用导致维护困难。
4. 源顺序与层叠来源
当权重和 !important 都相同时，CSS的“层叠”规则起作用。层叠顺序从高到低为：
- 用户样式表中带 !important 的规则
- 作者样式表中带 !important 的规则
- 动画（@keyframes）中的正在执行的样式
- 作者样式表中的普通规则
- 用户样式表中的普通规则
- 浏览器默认样式（最弱）
同一来源下，后写的规则覆盖先写的。
基本上就这些。掌握权重计算、理解继承局限、慎用 !important，并留意层叠顺序，就能清晰掌控CSS样式的最终表现。
