CSS 不生效主因是路径解析错误：file:// 协议下 ./ 指 HTML 所在目录，而 http:// 服务器中 ./ 或 / 的基准取决于 document root；应通过 Network 面板查 404 请求的实际 URL，并统一用构建工具的 base 配置或相对路径确保一致性。
为什么 ./styles.css 在 HTML 里不生效？
浏览器加载 CSS 失败，八成是路径解析没对上——HTML 文件被打开的方式（file:// 协议）和服务器环境（http://）对相对路径的基准不同。本地双击打开 HTML 时，./ 指的是当前 HTML 所在目录；但用 live-server 或 Nginx 启动后，根目录可能变成项目顶层，./ 就失效了。
- 检查浏览器开发者工具的 Network 标签页，看
styles.css请求是否 404，点击链接看它实际试图加载的完整 URL 是什么 - 如果 HTML 在
/src/index.html，而 CSS 在/src/css/styles.css，那正确写法是<link rel="stylesheet" href="css/styles.css">，不是./css/styles.css（./在这里多余且易错） - 避免在
href中混用./和../：它们依赖当前 HTML 的物理位置，一旦文件挪动或部署路径变化，立刻断裂
href="/css/styles.css" 为什么上线后 404？
以 / 开头是绝对路径，但这个“根”不是你电脑的磁盘根目录，而是 Web 服务器配置的 document root。开发时用 python -m http.server，根就是执行命令的目录；上线到 Nginx，root 可能设在 /var/www/myapp；Vercel 或 Netlify 则按 build 输出目录为根。
- 确认你的构建输出结构：比如
dist/css/styles.css存在，但index.html里写href="/css/styles.css"，说明服务器必须把dist当作 root，否则 404 - Vite、Webpack 等打包工具默认生成相对路径（如
href="css/styles.css"），更安全；若手动改成带/的绝对路径，就得同步改base配置项 - Next.js 或 Vue Router 的 history 模式下，
/css/这种路径还可能被前端路由劫持，导致返回 HTML 而非 CSS 内容
怎么让路径在本地预览和上线都可靠？
不靠猜，靠明确控制基准。现代构建工具都提供 base 或 publicPath 配置，统一解决这个问题。
- Vite 项目中，在
vite.config.js里设base: "./"（开发/本地用）或base: "/my-app/"（部署到子路径时），所有资源路径自动适配 - Webpack 用户注意：
output.publicPath必须和实际部署的 URL 前缀一致，比如部署在https://cdn.example.com/assets/，就要设成"https://cdn.example.com/assets/" - 纯静态 HTML 无构建步骤？那就老实用相对路径，且确保所有 HTML 和资源都在同一套目录结构下，避免跨级引用（比如从
/pages/a.html引../../assets/style.css）
Chrome 显示 net::ERR_FILE_NOT_FOUND 是啥意思？
这是 file:// 协议下的典型报错，说明浏览器根本没发 HTTP 请求，而是直接查本地文件系统——路径错了，或者文件根本不在那个位置。
立即学习“前端免费学习笔记（深入）”；
- 右键 HTML → “复制文件地址”，粘贴进地址栏，看开头是不是
file:///；是的话，所有href都按你电脑的文件夹层级算，和服务器无关 - 用 VS Code 的 Live Server 插件启动，地址变成
http://127.0.0.1:5500/，这时href="css/style.css"就是相对于该 URL 的路径，而非磁盘路径 - 别信编辑器右上角的“预览”按钮——有些会强行用
file://打开，即使你刚保存过 CSS 文件，也照样报错
href 值，在双击打开、Live Server 启动、Nginx 部署、CDN 回源这四种场景下，含义完全不同。 
