外部CSS加载无效主因是link标签位置错误或引用顺序不当：必须置于head内，且自定义样式需在重置样式和框架样式之后；还需排查内联样式、!important、特异性及路径与MIME类型问题。
外部 CSS 样式加载后无效，多数情况不是文件路径或语法问题，而是 <link> 标签在 HTML 中的位置或引用顺序不合理，导致样式被覆盖、未生效或被浏览器忽略。
link 标签必须放在 head 中，不能放在 body 里
虽然浏览器可能“容忍”把 <link rel="stylesheet"> 放在 <body> 内（尤其现代浏览器会尝试解析），但这是不符合 HTML 规范的写法，会导致：
- 样式表延迟加载，DOM 渲染完成后再加载，出现闪屏（FOUC）
- 部分浏览器（如旧版 IE）直接忽略 body 内的 link 标签
- CSSOM 构建异常，影响 JavaScript 获取 computedStyle
✅ 正确写法：
<head><link rel="stylesheet" href="style.css">
</head>
样式表引用顺序决定层叠优先级
CSS 层叠规则中，“后声明的样式”会覆盖“先声明的同名样式”。如果多个 <link> 引入不同 CSS 文件，顺序错了，就会导致预期样式被覆盖。
立即学习“前端免费学习笔记（深入）”；
- 通用重置样式（如 normalize.css）应放在最前面
- 基础框架/组件库（如 Bootstrap）放在中间
- 项目自定义样式（如 main.css）必须放在最后
❌ 错误顺序（自定义样式被覆盖）：
<link rel="stylesheet" href="bootstrap.css">
✅ 正确顺序：
<link rel="stylesheet" href="normalize.css"><link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="main.css">
检查是否被内联样式或 !important 干扰
即使外部 CSS 加载成功，也可能因以下原因“看起来无效”：
- HTML 元素上写了
style="color: red;"—— 内联样式的优先级高于外部 CSS - 其他 CSS 文件用了
!important强制覆盖，且它在你的样式之后加载 - 选择器特异性（specificity）太低，比如用
.btn覆盖不了div#header .btn.active
建议：打开浏览器开发者工具（F12），选中元素，在 Styles 面板中查看哪些声明被划掉、哪些生效，点击右侧小箭头可追溯来源文件和行号。
确认文件路径与 MIME 类型正确
看似加载了，实际可能是 404 或返回了 HTML 页面（比如路由错误返回 index.html），此时浏览器不会报错，但 CSS 不生效。
- 检查 Network 面板中 CSS 文件状态码是否为 200，Content-Type 是否为
text/css - 相对路径以 HTML 文件为基准，不是以 CSS 文件自身位置为准
- 使用开发者工具的 “Preview” 或 “Response” 查看是否真的返回了 CSS 内容
基本上就这些。定位时优先看 head 位置、加载顺序、开发者工具中的实际应用状态，比反复改 CSS 更有效。
