CSS 404 根本原因是浏览器未获取到文件，核心在于路径解析与服务器映射错位；应通过 Network 面板确认实际请求 URL，检查 href 路径、rel 属性大小写、HTML 页面 URL 基准、构建/部署配置及服务器路径映射是否一致。
CSS 文件 404 不是样式没生效，而是浏览器根本没拿到文件——问题几乎全出在路径解析和服务器映射的错位上，而不是 CSS 写错了。
看 Network 面板里真实请求的 Request URL
打开开发者工具 → Network → 刷新页面 → 找标红的 style.css 请求 → 点开看 Request URL。这个地址才是关键，它和你写的 href 值可能不一致，原因包括：
-
href="css/style.css"在/blog/post.html中，实际请求的是https://example.com/blog/css/style.css（不是项目根下的/css/） -
href="/css/style.css"却 404，说明服务器上/css/style.css这个路径并不存在（比如构建后输出到了/assets/css/） - 本地双击打开 HTML 时，
file://协议下/指向磁盘根（如C:/），不是项目根目录
rel="stylesheet" 拼错或大小写错误
浏览器只认严格小写的 rel="stylesheet"，漏掉、多空格、大小写混用都会让标签被忽略——不发请求、不报错、Elements 里能看到标签，但 Styles 面板永远为空。
- ❌ 错误写法：
rel="StyleSheeT"、rel="css"、rel="stylesheet "（末尾空格） - ✅ 正确写法：
rel="stylesheet"（全小写、无空格、无多余字符） -
type="text/css"已完全过时，删掉更干净
路径基准永远是 HTML 页面的 URL，不是文件系统位置
相对路径（如 ./css/style.css 或 ../assets/style.css）始终以当前 HTML 页面的完整 URL 为起点计算，和你在编辑器里看到的文件夹结构无关，也和 CSS 文件自身所在位置无关。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 页面 URL 是
https://example.com/blog/article.html：-
href="style.css"→ 请求https://example.com/blog/style.css -
href="../css/style.css"→ 请求https://example.com/css/style.css -
href="/css/style.css"→ 请求https://example.com/css/style.css
-
- 绝对路径（以
/开头）依赖服务器配置，开发时必须用本地 HTTP 服务（如 VS Code Live Server、python3 -m http.server或vite preview）启动，不能双击打开 HTML 文件
后端框架或构建工具导致的路径偏移
Django、Flask、Vite、Vue CLI 等默认不会把静态资源“自动放对位置”，href 和实际部署路径不匹配是上线 404 的主因。
- Django：必须用
{% static 'css/style.css' %}，不能直接写/static/css/style.css（除非已配好 staticfiles 服务） - Vite：若设了
base: "/myapp/"，HTML 中必须有<base href="/myapp/">，否则所有/xxx都会少一层前缀 - Nginx：若
root /var/www/myapp;，那么/css/style.css对应的磁盘路径就是/var/www/myapp/css/style.css，不是/var/www/css/ - Linux 服务器严格区分大小写：
/CSS/style.css≠/css/style.css，Windows 下不暴露问题，一上线就崩
真正卡住人的地方，往往不是路径写错了，而是你以为路径对了——结果浏览器拼出来的 Request URL 和你脑内模拟的完全不一样；或者你改了 HTML 的 href，却忘了同步调整构建配置或 Nginx 的 root。每次遇到 404，先盯死 Network 里的那个 URL，再比对服务器上的真实路径，中间差的那层映射，就是你要补的洞。
