绝大多数“样式没生效”问题源于link标签中href路径解析错误，浏览器以html文件位置为基准解析路径，而非css文件位置或项目根目录。
用 link 引入 CSS 时，浏览器报 404 是路径写错了
绝大多数“样式没生效”问题，根源不在 CSS 写法，而在 <link rel="stylesheet" href="..."> 里的 href 路径解析失败。浏览器按 HTML 文件所在位置为基准去拼接路径，不是按当前 CSS 文件位置，也不是按项目根目录——这点很多人会误判。
常见错误现象：
本地双击打开 HTML 正常，但用本地服务器（如 python -m http.server）就加载不到 CSS；或者开发时路径对了，部署到 nginx 后 404。
- 相对路径（如
./css/style.css、../assets/main.css）依赖 HTML 文件的物理位置，移动 HTML 文件必须同步调整所有href - 绝对路径（如
/css/style.css）以站点根目录为起点，要求服务器配置支持静态资源映射，且开发环境与生产环境的根路径需一致 - 协议相对 URL（如
//cdn.example.com/lib.css）只适用于 CDN，不解决本地路径问题
什么时候该用 / 开头的绝对路径
当你的项目部署后有确定的域名和根路径（比如上线后访问地址是 https://example.com/app/），且你控制服务器或构建工具能确保静态资源放在对应子目录下，才适合用根相对路径（即以 / 开头）。
但注意：/css/style.css 永远指向 https://example.com/css/style.css，而不是 https://example.com/app/css/style.css。如果应用部署在子路径，必须配合 <base href="/app/"> 或构建时重写路径。
立即学习“前端免费学习笔记（深入）”；
- 使用
<base>标签可统一修正所有相对路径的基准，但它会影响页面内所有相对 URL（包括图片、链接），需谨慎 - Vite、webpack 等现代构建工具默认启用
public目录或assetsInlineLimit，会自动处理路径，此时手写绝对路径反而容易出错 - Nginx 配置中若用了
location /app { alias /var/www/myapp/; }，则/css/实际要映射到文件系统/var/www/myapp/css/，别漏掉alias末尾的斜杠
相对路径写法中 ./ 和 ../ 的实际行为差异
./ 表示“当前目录”，../ 表示“上一级目录”，它们的解析完全取决于 HTML 文件所在的磁盘路径或 URL 路径，与 CSS 文件自身位置无关。
例如：
HTML 在 /project/src/pages/index.html，想引入 /project/src/css/base.css，正确写法是 ../css/base.css；
但如果把 HTML 移到 /project/dist/index.html，而 CSS 在 /project/dist/css/base.css，就得改成 ./css/base.css。
-
href="css/style.css"等价于href="./css/style.css"，省略./是常规写法，但语义上仍是相对路径 - 路径中出现多个
../（如../../../lib/reset.css）极易出错，建议通过构建工具统一输出到扁平结构，避免深层嵌套 - windows 下路径分隔符反斜杠
在 HTML 中无效，必须用正斜杠/，哪怕文件系统是 Windows
用 Webpack/Vite 时，为什么直接写 src 路径也能工作
因为构建工具在编译阶段做了路径重写：你在 <link href="./src/css/main.css"> 中写的路径，会被替换成最终输出的哈希文件名和公共路径（如 /assets/main.123abc.css）。这本质上不是浏览器原生支持，而是构建时的字符串替换 + 输出配置协同的结果。
- Vite 的
public目录下文件（如public/css/reset.css）在构建后仍保持原路径，引用时写/css/reset.css即可，无需担心哈希 - Webpack 的
file-loader或asset/Resource类型会返回最终 URL，所以import './style.css'在 js 中触发加载，比直接写<link>更可控 - 如果禁用构建工具的路径处理（比如用 raw-loader 加载 CSS 字符串再注入），那又退回到原始路径解析逻辑，必须手动保证正确性
路径问题最麻烦的地方在于：它在某个环境里“碰巧”能跑通，掩盖了根本缺陷。一旦换服务器、换构建配置、甚至只是改了个文件夹名，就立刻暴露。所以不要依赖“现在能用”，而要明确知道每个路径的解析依据是什么。