先看network面板中css请求的request url，再比对实际路径：href以html所在目录为基准，/开头路径在file://下指向磁盘根导致404，应改用相对路径或启动本地http服务。
Network面板里看到404，先看Request URL到底请求了什么
浏览器不会告诉你“路径写错了”，只会默默在Network里标红一个404请求。点开那个.css请求，重点看Request URL字段——它才是浏览器真实发出的地址，不是你写的href值，而是拼接后的结果。
常见现象包括：
-
Request URL显示http://localhost:5173/css/style.css，但你的CSS实际在src/assets/css/style.css - HTML在
/pages/user.html，却写了href="css/style.css"，结果请求的是/pages/css/style.css - 写了
href="/css/style.css"，本地双击打开时变成file:///css/style.css，直接访问磁盘根目录
验证方法：把Request URL整个复制出来，粘贴到新标签页回车。能显示CSS源码，说明路径本身没问题；404或空白，就该调整href写法。
相对路径怎么算才不迷路：以HTML文件为唯一起点
路径不是按你编辑器里文件夹折叠状态算的，也不是按当前JS/CSS位置算的，只认HTML文件物理存放位置。比如index.html在src/pages/home.html，那所有href都从这个路径出发计算。
几个典型场景：
- CSS在同级：
href="home.css"（不用写./home.css） - CSS在
src/css/：href="../css/home.css"（退一级到src/，再进css/） - CSS在
src/assets/styles/：href="../assets/styles/home.css" - 误写成
href="../../css/home.css"——多退一级，路径越界
Windows用户注意：\是非法路径分隔符，必须用/，哪怕你在本地用VS Code编辑。
以/开头的路径为什么本地跑不通
href="/css/style.css"是根路径，意思是“从网站根目录开始找”。但双击HTML用file://协议打开时，浏览器把/当成系统盘根（如C:/），不是你项目文件夹。
解决方案只有两个：
- 开发阶段一律避免以
/开头，改用相对路径 - 必须用根路径时，启动本地HTTP服务：
npx serve -s、python3 -m http.server或VS Code Live Server插件，让/真正指向你的项目根目录
构建工具（Vite/Webpack）输出的HTML中，href可能被自动注入前缀（如/myapp/css/style.css），这时要检查base配置是否匹配部署路径，否则上线后照样404。
link标签本身写错也会导致CSS不加载
路径完全正确，但样式就是不生效？可能是<link>没被浏览器识别为样式表。
高频低级错误：
- 漏掉
rel="stylesheet"，或者拼错成rel="stylsheet" - 把
<link>写在里，部分浏览器延迟解析甚至忽略 - 服务端返回的
Content-Type不是text/css（比如Nginx默认把.css当application/octet-stream），控制台会报Refused to apply style from 'xxx' because its MIME type
检查方式：在Elements面板里找到<link>标签，右键→“Force element state”→勾选:hover之类看是否触发样式变化；若无反应，大概率是rel或MIME问题。
最常被忽略的一点：路径对了，rel也对了，但CSS文件里有语法错误（比如少了个}），会导致整张表被浏览器静默丢弃——此时Network里请求是200，Preview里能看到内容，但样式就是不生效。遇到这种情况，先把CSS内容清空，只留body { background: red; }测试是否起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
