CSS未生效的五大原因：①preload/prefetch未配合JS注入导致白屏；②media属性不匹配使样式被屏蔽；③link标签误加defer/async属性无效且危险；④服务器未返回text/css MIME类型；⑤构建工具配置错误混淆script与style处理逻辑。
CSS 文件被 rel="preload" 或 rel="prefetch" 加载了
这类预加载方式不会自动将 CSS 应用到页面，仅下载资源。如果误用 且没接 onload 注入逻辑，页面就会白屏或无样式。
- 检查 HTML 中是否用了
preload却没补上 JS 注入：需手动创建或插入 -
prefetch更不适用——它只用于未来导航，当前页面完全不生效 - 正确做法：关键 CSS 必须用
同步加载；非关键才考虑preload + onload动态注入
media 属性导致 CSS 被“屏蔽”
常见于响应式写法：，或错误设为 media="(max-width: 0px)" 等永远不匹配的条件，浏览器会下载但不应用。
- 打开开发者工具 → Network 标签页，筛选
css，点击对应请求 → 查看Initiator列是否显示link[media] - 检查所有
标签的media值，临时改成media="all"测试是否恢复样式 - 注意：
media不支持 JS 表达式，也不能写成media="screen and (min-width: 768px) and print"这类矛盾组合
使用 defer 或 async 加载 CSS（无效且危险）
defer 和 async 是为 设计的，对 完全无效——但部分构建工具（如 Webpack 的 mini-css-extract-plugin 配置错误）可能意外产出带这些属性的标签，导致浏览器忽略或报错。
- 直接查看页面源码，搜索
，确认是否存在非法属性 - 构建产物中若出现
，说明打包配置混淆了 script 与 style 处理逻辑 - 修复方向：检查 Webpack/Vite 插件配置，确保 CSS 输出走
link标签而非动态script注入；禁用对的自动添加defer行为
服务器返回了 Content-Type: text/plain 而不是 text/css
即使路径正确、标签合法，如果服务端未设置正确的 MIME 类型，浏览器会拒绝解析 CSS，控制台报错 The resource ... was preloaded using link preload but not used within a few seconds 或直接静默失败。
立即学习“前端免费学习笔记（深入）”；
- 在 Network 面板中点击 CSS 请求 → 查看 Response Headers → 找
Content-Type字段 - 静态托管（如 GitHub Pages、Netlify）通常自动识别，但自建 Nginx/Apache 或本地
python -m http.server默认不设.css类型 - Nginx 示例配置：
location ~ \.css$ { add_header Content-Type text/css; }
media、一行错误的构建配置、甚至本地起的服务根本没发对头。别急着重写样式，先盯住 Network 面板里的那条 CSS 请求，看它到底被浏览器怎么对待了。 
