给页面新增了一段 CSS 样式，但页面没有任何变化，你会如何系统性地排查？
按「从外到内、从存在到生效」的顺序排查：
1. 样式文件是否真的加载了
- 打开 DevTools -> Network，确认 CSS 文件 200 且内容包含你写的规则（排除路径写错、被缓存、构建未生效）。
- 确认引入位置：
<link>在<head>，或import被打包进产物。
2. 选择器是否真的命中元素
- 在 Elements 面板选中目标元素，看右边 Styles 里有没有你的规则；没有则说明选择器没匹配上。
- 常见原因：类名拼错、动态 class（Vue
:class/ ReactclassName）、伪类写错、后代层级不对。
3. 被更高优先级覆盖（最常见）
- 同面板里被划掉的样式（line-through）就是被覆盖的规则。
- 优先级：
!important> 行内 style > ID > 类/属性/伪类 > 元素。 - 检查是否有重复选择器、后写的同名规则、或 UI 库 / Scoped 样式干扰。
4. 属性是否真的会生效
- 目标元素是否为
display: inline（width/height/margin-top不生效）。 - 父元素
overflow: hidden把内容裁掉、opacity: 0、visibility: hidden、z-index被遮挡。 - 动画/过渡未触发、
@media条件不满足（如宽度断点没命中）。
5. 缓存与构建
- 强制刷新（Ctrl/Cmd + Shift + R）排除浏览器缓存。
- 确认构建工具（Vite/Webpack）重新编译，Sass/Less 变量未覆盖。
口诀：先确认加载 -> 再确认命中 -> 再看是否被覆盖 -> 最后看属性本身是否生效。