外部CSS不生效最常见原因是href路径错误和浏览器缓存，其次为link标签位置/拼写错误及样式被后加载CSS覆盖；应优先检查Network面板是否返回404或非200状态。
link 标签的 href 路径是否正确
外部 CSS 不生效，最常见原因是 link 标签里的 href 指向了错误路径。浏览器控制台 Network 面板里能看到 404 状态的 .css 文件请求，基本就是这个原因。
注意点：
-
href是相对于当前 HTML 文件的位置，不是相对于 CSS 文件本身 - 使用相对路径时，
./表示同级目录，../表示上一级，/表示网站根目录（需确认服务器实际根路径） - 路径中大小写敏感（尤其在 Linux 服务器上），
style.css和Style.css是两个文件 - 避免用中文或空格命名 CSS 文件，容易因编码或 URL 转义出问题
link 标签是否放在 head 中且未被注释或拼错
link 必须写在 内，且不能被 HTML 注释包裹（如 <!-- <link ...> -->），也不能写成 <linke></linke> 或 <linkk></linkk> 这类拼写错误。
检查项：
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具 → Elements 面板，确认
<link>标签真实存在于中 - 右键“审查元素”后看标签是否被渲染出来，而不是仅存在于源码注释里
- 确认没有遗漏
rel="stylesheet"，缺少它会导致浏览器忽略该链接 - 确保没有写成
rel="style"或type="text/css"（现代浏览器已不强制要求，但写错可能干扰解析）
CSS 加载顺序是否被后置样式覆盖
多个 link 标签按从上到下的顺序加载，后面引入的 CSS 规则会覆盖前面同名选择器的声明。如果页面看起来“没生效”，很可能是被后面加载的样式（比如框架 CSS、重置样式表）盖掉了。
排查方法：
- 在开发者工具的 Elements 面板中选中目标元素，右侧 Styles 面板里查看哪些规则被划掉（strike-through），点开对应文件名确认来源
- 临时删掉其他
link标签，只留你的 CSS，看是否生效 - 若必须保留顺序，可提高选择器权重（如加
body .my-btn替代.my-btn），但更推荐用更明确的命名或!important（仅限调试，不建议长期使用）
浏览器缓存导致旧 CSS 仍在运行
改完 CSS 文件后刷新页面却没变化，大概率是浏览器缓存了旧版本。尤其当文件名没变、服务器又没配好缓存头时，这个问题特别隐蔽。
快速验证与解决：
- 强制刷新：Windows/Linux 按
Ctrl + F5，macOS 按Cmd + Shift + R - 开发者工具 → Network 面板勾选 “Disable cache”，再刷新
- 在
link的href后加查询参数临时破缓存，如style.css?v=1.0.1（上线时应改用文件内容哈希） - 检查响应头中的
Cache-Control和ETag，确认服务器没返回强缓存策略
实际项目里，路径错误和缓存问题占外部 CSS 失效的七成以上；顺序和拼写问题次之。别急着怀疑框架或构建工具——先打开 Network 面板看 CSS 文件有没有 200 响应，这是最快定位起点。
