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。
