CSS层叠是按权重、来源、顺序三级裁定样式的覆盖规则，而非简单“后写赢”；浏览器收集所有匹配规则后排序，最后生效的是排序末位的声明。
什么是 CSS 层叠？先看最直接的判断依据
CSS 样式覆盖不是“后写的一定赢”，而是按权重、来源、顺序三级裁定。浏览器渲染时，会把所有匹配到的规则收集起来，再按层叠规则排序——排在最后的那条才生效。
关键点在于：
-
!important有最高优先级（但仅限同类型声明之间比较） - 行内样式 > ID 选择器 > 类/属性/伪类 > 元素/伪元素
- 同权重时，后出现的规则覆盖先出现的（源码顺序或
@import顺序） - 外部样式表、内部样式、行内样式三者来源不同，也会参与排序（行内 > 内部 > 外部）
怎么快速查清哪条样式被覆盖了？用开发者工具反向追踪
Chrome / Edge / Firefox 的开发者工具里，Elements 面板右侧的 Styles 标签页，会把所有命中该元素的 CSS 规则列出来，并划掉被覆盖的声明——这是最直观的线索。
注意几个细节：
立即学习“前端免费学习笔记（深入）”；
- 被划掉的规则不一定无效，可能是同权重下顺序靠前，或被更高权重规则压制
- 点击规则右侧的文件名链接，能跳转到对应代码位置，方便定位是哪个 CSS 文件、哪一行写的
- 如果看到某条规则显示为
color: red !important却仍不生效，说明有另一条带!important的同名属性且权重更高（比如它来自行内样式） - 某些框架（如 Vue 的 scoped style 或 Shadow DOM）会自动加属性选择器，人为提高权重，这时看到的选择器可能比你写的长很多，别忽略那些自动生成的部分
常见踩坑：ID 和 class 混用时权重计算容易算错
很多人以为 #header .nav 和 .header-nav 权重一样，其实不是：#header .nav 是 1 个 ID + 1 个 class = 110（按千百十一进制算），而 .header-nav 只是 1 个 class = 10。
权重数字只是辅助理解，真正要记的是比较逻辑：
- ID 选择器数量 > 类/属性/伪类数量 > 元素数量
-
div#main.content:hover权重是 1（ID）+ 2（class + pseudo-class）+ 1（element）= 102 -
body.home #content p strong是 1（ID）+ 1（class）+ 1（element）+ 1（element）= 103 - 两个规则都匹配同一个
，后者胜出
写的时候别硬凑高权重，优先用语义化 class，必要时用嵌套层级控制范围，比堆 ID 更可持续。
动态插入的样式（JS 设置、CSS-in-JS）怎么分析？
JavaScript 通过 element.style.xxx 或 el.setAttribute('style', '...') 写的，属于行内样式，权重高于任何外部 CSS 规则（除非对方也用了 !important）。
但要注意：
-
el.style.color = 'red'生成的是style="color: red;"，只覆盖单个属性，不影响其他样式 - CSS-in-JS 库（如 styled-components、Emotion）通常会给每个组件生成唯一 class，并用属性选择器强化（如
[data-emotion="abc123"]），本质还是 class 权重，但因 class 名唯一，几乎不会被意外覆盖 - 如果发现 JS 设置的样式没生效，先检查是否被更早执行的 JS 清除了（比如重置了
style属性），而不是立刻怀疑 CSS 层叠
真正难调试的，往往是多个框架样式混用 + 动态 class 切换 + !important 泛滥。这种时候，不要猜，打开 DevTools，逐条看 Styles 面板里哪些被划掉了、为什么被划掉——路径和顺序比理论权重更可靠。
