首先确认CSS文件是否成功加载：检查Network面板中css请求的状态码是否为404或403，再排查路径、大小写、前缀及构建输出路径；其次验证link标签位置、rel/type属性是否正确；最后通过Elements面板分析样式是否被覆盖或选择器不匹配。
样式表未加载或 404 错误
直接打开浏览器开发者工具的 Network 标签页，筛选 css，看对应 .css 文件是否发起请求、状态码是不是 404 或 403。常见原因包括路径写错、大小写不一致（尤其在 Linux 服务器上）、URL 中多写了斜杠或漏了 /static/ 等前缀。
-
在 HTML 文件位于根目录时才有效；若 HTML 在/admin/index.html，浏览器会尝试加载/admin/css/style.css - 使用相对路径时，优先改用绝对路径：以
/开头，如href="/css/style.css" - Vite / Webpack 等构建工具默认把 CSS 输出到
/assets/下，但仍写成style.css就会 404 —— 要按实际构建后路径填写，或交由构建插件自动注入
CSS 必须在 内且早于依赖它的 HTML 元素渲染，否则可能出现「闪动」或样式延迟生效。更隐蔽的问题是属性值拼写或逻辑错误。
-
rel必须是"stylesheet"，写成"style"或"css"会被忽略 -
type="text/css"在 HTML5 中可省略，但若显式写了，值必须准确；写成type="css"会导致浏览器跳过加载 - 加了
disabled属性（）或通过 JS 动态设置了disabled = true，样式不会应用 - 多个
中存在同名title且启用了 alternate 样式表切换逻辑，可能意外禁用主样式
CSS 优先级被覆盖或选择器不匹配
即使文件成功加载，样式也可能因层叠规则失效。打开开发者工具的 Elements 面板，选中目标元素，在右侧 Styles 面板里观察哪些声明被划掉（strikethrough），点开对应 CSS 规则，看来源文件和行号。
- 检查是否被更高优先级的选择器覆盖：例如
#header .nav a比.nav a优先级高；内联样式style="color: red"通常比外部 CSS 更强 - 确认选择器能真正匹配到元素：比如写了
button.primary，但 HTML 中是—— 类名顺序无关，但必须同时存在；而button .primary（中间有空格）表示后代元素，不匹配按钮自身 - 注意伪类/伪元素拼写：
:hover写成:hoever或::before写成:before（单冒号在部分场景仍可用，但::placeholder必须双冒号）会导致整条规则失效
媒体查询或条件加载导致样式不触发
响应式样式或针对特定环境的 CSS 可能「存在但不激活」，容易误判为未生效。
立即学习“前端免费学习笔记（深入）”；
-
@media (max-width: 768px)在桌面宽屏下自然不生效；用开发者工具的设备模拟器切换尺寸验证 -
只在打印预览时加载，普通浏览下不可见 - CSS 中用了
@supports (display: grid)，但当前浏览器不支持该特性（如旧版 Safari），整个块被跳过 - 某些框架（如 Vue 的 scoped CSS）会自动添加属性选择器，如
div[data-v-f3f3eg9]，手动写的 CSS 若没带对应属性，就无法命中
/* Vue 单文件组件编译后可能变成这样 */
div[data-v-f3f3eg9] {
color: blue;
}
/* 你手写的外部 CSS 不含 data-v-f3f3eg9 属性，就不会生效 */关键点在于：先确认文件是否真的到达浏览器，再确认它是否被解析执行，最后确认它是否作用到了目标元素上。三者缺一不可，而最容易被跳过的其实是第一步——连文件都没加载进来，后面所有调试都白忙。
