CSS未加载的首要排查是Network面板中.css请求状态：404为路径错误，403为权限拒绝，0或(failed)多因跨域或file://限制；需核对Request URL、href路径、大小写、斜杠方向及Content-Type是否为text/css。
检查 Network 面板中 CSS 请求是否 404
这是最直接、最常被忽略的第一步：CSS 根本没发出去，或发出去但服务器返回了 404。不是“样式不生效”，而是“压根没加载”。
- 按
F12打开开发者工具 → 切换到Network标签 → 刷新页面 - 在筛选栏输入
.css，看对应文件的Status列：若显示404，说明路径错了；403表示权限拒绝；0或(failed)可能是跨域或本地file://协议限制 - 点击该 CSS 请求，看
Headers里的Request URL—— 这才是浏览器真正尝试访问的地址，和你写的href值可能不一致（比如相对路径解析后变成/css/style.css，但实际文件在/assets/css/）
验证 <link> 标签写法与路径是否匹配
路径写错是最高频原因，而“看起来一样”不等于“系统认得一样”——大小写、斜杠方向、根目录理解偏差都会导致失败。
-
href必须带rel="stylesheet"，缺了这个，浏览器不会当它是样式表 - 相对路径以当前 HTML 文件为起点：
style.css（同目录）、./css/style.css（子目录）、../assets/style.css（上一级再进 assets） - 绝对路径以网站根目录为起点：
/css/style.css—— 注意：不是文件系统根目录，也不是项目根目录；部署在子路径（如https://example.com/myapp/）时，/css/会去请求https://example.com/css/，而非myapp/css/ - Linux 服务器区分大小写：
Style.css≠style.css；Windows 下可能“碰巧”能用，但上线即崩
排除缓存与 MIME 类型干扰
即使路径完全正确，你看到的也可能是旧版本，或服务器根本没告诉浏览器“这是 CSS”。
- 强制刷新无效？在
Network面板顶部勾选Disable cache，再刷新 —— 这比Ctrl+F5更彻底 - 检查响应头：
Content-Type必须是text/css；若返回text/plain或空值，浏览器会拒绝解析（常见于用 Pythonhttp.server直接双击打开 HTML，或 Nginx/Apache 未配置.cssMIME 类型） - 本地开发请用 Live Server、Vite、
npx http-server等正规开发服务器，别直接用file://协议打开 HTML
确认没有被扩展、自动填充或语法错误静默拦截
有些问题不会报错，但会悄悄让样式失效，需要主动“揪出来”。
立即学习“前端免费学习笔记（深入）”；
- 临时禁用所有 Chrome 扩展（访问
chrome://extensions），尤其广告屏蔽类（uBlock Origin）、CSS 注入类插件 - 检查输入框是否被
-webkit-autofill覆盖：在Elements面板中选中<input>，看Styles面板右侧是否有高亮的 autofill 规则，它会无视你的background、color等设置 - CSS 文件里一个漏掉的
}或拼错的属性（如backgound-color），会导致其后所有规则失效 —— 打开Console，看有没有Invalid CSS property name或解析中断提示
真正卡住人的，往往不是“找不到原因”，而是跳过 Network 面板直接改 CSS；或是本地能跑就以为没问题，结果部署到 Linux 服务器因大小写挂掉。把请求 URL 和响应状态看清楚，比猜十次都管用。
