公共CSS路径以HTML文件位置为基准，缓存依赖响应头，link须置于head防FOUC，覆盖问题需查来源、优先级和!important。
link 引入公共 CSS 文件的路径怎么写才不 404
关键在相对路径的基准是 HTML 文件所在位置，不是 CSS 文件或 JS 文件的位置。比如 index.html 在根目录，css/common.css 是你的公共样式，那必须写成：
<link rel="stylesheet" href="css/common.css">如果
about.html 在 pages/ 子目录下，它引用同一份 css/common.css 就得写成：<link rel="stylesheet" href="../css/common.css">常见错误是统一用
./css/common.css，结果子目录页直接 404——因为 ./ 指的是当前 HTML 所在目录，不是项目根目录。
多个页面都引入同一个 CSS，浏览器会重复下载吗
不会。现代浏览器对相同 href 的 <link> 会复用已缓存的资源，前提是响应头配置合理。确保服务器返回了类似这样的头：
Cache-Control: public, max-age=31536000如果用本地开发服务器（如 VS Code Live Server），默认不带强缓存头，刷新时可能看似“重载”，但实际仍走内存缓存（memory cache），不发新请求。真正要验证是否复用，看 Chrome DevTools 的 Network 面板：状态码显示
200 (from memory cache) 或 304 就说明生效了。
link 标签放 head 还是 body 里更稳妥
必须放在 <head> 内，且尽量靠前。原因有三：
- 避免 FOUC（Flash of Unstyled Content）：样式晚于 HTML 渲染，页面会先裸奔再突然变样
- 部分浏览器（尤其是旧版 Safari）对
<link>在<body>中的支持不一致，可能阻塞解析或静默失败 - CSSOM 构建需早于 DOM 渲染，否则影响渲染流水线
rel="preload" + JS 动态插入，但那是另一套方案，和普通 <link> 共用场景无关。
如何确认公共 CSS 真正生效且没被覆盖
打开任意页面的 DevTools，选中一个元素，在 Styles 面板里找你的公共类名（比如 .btn-primary）。注意三点：
- 看来源文件是不是你预期的
common.css，而不是内联 style 或其他 CSS - 检查 specificity：如果某个页面的局部样式写了
#header .btn-primary，它会覆盖.btn-primary，哪怕后者在公共文件里 - 确认没有
!important混用导致意外优先级反转——公共 CSS 里尽量避免用!important，留给业务层按需覆盖
立即学习“前端免费学习笔记（深入）”；
标签本身不复杂，但路径、缓存、加载时机、层叠顺序这四点，任一出错都会让“共用”变成“看似共用实则失效”。尤其多人协作时，路径写法不统一、缓存策略缺失、样式优先级乱加!important，是最常被忽略的三个点。 
