CSS不加载的首要原因是link标签href路径错误，导致浏览器未发起请求或返回404；其次检查media属性是否匹配当前环境、rel是否为stylesheet且位于head中、服务器是否返回text/css类型。
link 标签 href 路径错误导致样式不加载
浏览器根本没请求 CSS 文件，说明 的 href 值有问题。常见情况是相对路径写错，比如当前 HTML 在 /pages/index.html，而 CSS 放在 /css/style.css，却写了 href="css/style.css"（少了一级 ../）。用浏览器开发者工具的 Network 面板刷新页面，看 CSS 文件是否显示为 404 —— 如果状态码是 404，优先检查路径。
- 用绝对路径测试：把
href改成以/开头，如href="/css/style.css"，确认是否生效（可快速排除相对路径歧义） - 右键点击
标签中的href值，在新标签页打开，看能否直接访问到 CSS 内容（注意：必须返回纯 CSS 文本，不能是 404 或 HTML 页面） - 构建工具（如 Vite、Webpack）中，public 目录和 src/assets 下的文件引用规则不同，
href要匹配其输出后的实际路径，不是源码路径
link 标签 media 属性值不匹配当前环境
这类写法会让样式只在打印预览时生效，普通浏览完全不会加载。同样，media="(max-width: 768px)" 在桌面宽屏下也会被忽略。如果样式“有时生效有时不”，先看 media 是否加了限制条件。
- 临时移除
media属性，或设为media="all"，验证是否恢复生效 - 媒体查询中用了
prefers-color-scheme或hover等特性，但当前设备/系统不满足条件，也会跳过加载 - 某些旧版 IE 对媒体查询支持差，
media="screen and (min-width: 480px)"可能被整个忽略，建议降级为media="screen"排查
link 标签位置或 rel 属性缺失引发加载失败
是强制要求，漏掉 rel 或写成 rel="style" 等错误值，浏览器会忽略该标签，Network 中也看不到请求。另外，若 放在 内（尤其在 JS 操作后动态插入），部分浏览器可能不解析或延迟解析，造成样式“闪现”或不生效。
- 检查
是否有且仅有rel="stylesheet"，不能多词、少词或拼错 - 确保
在内，且不在后面动态注入（除非明确使用load事件监听） - 多个
之间不要用async或defer（它们对 CSS 无效，反而可能干扰解析）
服务器返回 Content-Type 不是 text/css
即使文件存在、路径正确、标签完整，如果服务器返回的响应头中 Content-Type 不是 text/css（例如返回了 text/plain 或 application/octet-stream），现代浏览器会拒绝解析该 CSS，控制台报错类似 Refused to apply style from 'xxx.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type.
立即学习“前端免费学习笔记（深入）”；
- 用开发者工具 Network 面板点开 CSS 请求 → Headers → Response Headers，查找
Content-Type字段值 - 本地用 Python 快速起服务测试：
python3 -m http.server 8000 --bind 127.0.0.1默认对.css返回正确类型；Node.js 的express.static()一般也没问题；但 Nginx/Apache 若配置不当，可能需要手动添加types { text/css css; } - GitHub Pages、Vercel 等平台通常自动识别，但如果 CSS 文件扩展名被改（如
style.txt），就一定出问题
