CSS 调试技巧
用浏览器开发者工具定位“样式没生效”的四大原因：匹配、优先级、继承与覆盖。
0. 直觉：样式不生效，先问“谁赢了”
“我明明写了，怎么没生效？”——几乎都是四个原因之一：文件没保存、选择器没匹配上、被更高优先级的规则覆盖、或者属性被继承/简写重置。开发者工具（DevTools）能把这四个原因全部可视化，本课教你用它排查。
1. Elements 面板：看元素命中了哪些规则
按 F12 打开 DevTools，切到 Elements（元素）面板：
- 点击左上角的选择器图标（箭头），再点击页面里的目标元素；
- 右侧 Styles（样式）子面板会列出所有命中该元素的规则，从上到下按优先级排列；
- 被划掉的声明表示“写了但被覆盖”，旁边会标注是谁赢的。
Styles 面板示例
h1 { color: blue; } ← 未划掉，生效
h1 { color: red; } ← 划掉，被上面的覆盖讲解： 这是调试 CSS 的第一站：先看规则有没有出现。规则没出现 = 选择器没匹配或文件没生效；规则出现但被划掉 = 优先级问题。
2. Computed 面板：看最终计算值
Styles 面板下面有 Computed（计算后）标签，显示每个属性“最终生效的值”以及来源规则。点某个属性，会展开所有参与竞争的规则和它们各自的权重。
讲解： 当多条规则混在一起时，Computed 面板直接告诉你答案：color 最终是 rgb(0, 0, 255)，来自哪条规则，为什么是它赢。
3. 覆盖样式追踪：找“谁赢了”
在 Styles 面板里，被划掉的声明旁边通常有来源文件与行号。点击可跳到对应源码；悬停可看到覆盖它的规则。配合优先级速查（css/180-CSSPriorityQuickStart），就能判断是该改权重、改顺序，还是加更具体的类。
讲解： 常见结论：第三方库样式覆盖不掉 → 你的选择器权重不够，而不是“库有问题”；“后写不生效” → 前面有更高权重的规则。
4. 盒模型可视化
Elements 面板右上角有盒模型图：中间是 content，向外依次是 padding、border、margin，鼠标悬停会高亮页面上的对应区域。
讲解： 布局“莫名其妙多了 20px”“两个盒子贴太近”这类问题，用盒模型图一眼就能看出是哪一层占的空间，再回到 css/050-CSS3BoxModelDetailed 查属性。
5. 常见问题排查清单
| 现象 | 优先检查 |
|---|---|
| 样式完全没生效 | 文件保存了吗？link 路径对吗？Console 有报错吗？ |
| 规则出现在面板但被划掉 | 优先级：权重、!important、行内样式 |
| 规则没出现在面板 | 选择器拼写、大小写、HTML 结构是否匹配 |
| 子元素继承了奇怪的值 | 父级有样式 + inherit，或简写属性重置 |
| 改了文件刷新没变化 | 浏览器缓存：勾选 Network 的 Disable cache |
| 只在某种状态下不对 | 伪类（:hover）顺序：:link → :visited → :hover → :active |
6. 动手试试
- 故意写错选择器（如
.text而 HTML 是class="txt"），用 Elements 面板观察规则未出现； - 写两条相同权重的规则，观察 Styles 面板里哪条被划掉；
- 给元素加
padding和border，用盒模型图确认实际占用尺寸； - 进阶挑战：用 Computed 面板找出一个第三方组件被覆盖的属性，再尝试用更高权重覆盖回来。
7. 核心知识点
一句话记住 CSS 调试：Elements 面板看命中，Computed 面板看结果，被划掉就是被覆盖，没出现就是没匹配。
- Styles 面板按优先级排列所有命中规则；
- 被划掉的声明 = 被更高优先级覆盖；
- Computed 面板显示最终计算值与来源；
- 盒模型图定位 padding/border/margin 空间问题；
- 排查顺序：保存与路径 → 选择器匹配 → 优先级 → 继承与简写 → 缓存。
8. 注意事项与改进建议
| 问题点 | 说明 | 改进方案 |
|---|---|---|
用 !important 测试 | 会污染真实优先级 | 在 DevTools 里临时勾选，确认后改成正规写法 |
| 只改代码不清理缓存 | 误以为没生效 | Network 面板勾选 Disable cache 并强制刷新 |
| 忽略 Console 报错 | 语法错误会让整段规则失效 | 先看 Console 红色报错与行号 |
| 在压缩产物上调试 | 源码映射缺失难以定位 | 开发环境调试，或开启 sourcemap |
9. 扩展学习
- 优先级速查：
css/180-CSSPriorityQuickStart； - 优先级深入：
css/170-PriorityCalculation； - 选择器匹配：
css/130-CSS3SelectorSystem； - 盒模型：
css/050-CSS3BoxModelDetailed。