<link> 标签引入外部样式失效主因是rel缺失或错误、href路径计算错误、标签未置于<head>内；浏览器仅凭rel="stylesheet"启动CSS解析，且href以HTML文件URL为基准计算路径。
<link> 标签引入外部样式失效，90% 是浏览器压根没把它当样式表处理——不是 CSS 写错了，而是 rel 缺失、href 算错，或标签放错了位置。
为什么 <link rel="stylesheet"> 必须写在 <head> 里
浏览器是自上而下流式解析 HTML 的。<link rel="stylesheet"> 放在 <body> 里，等于让浏览器先画出无样式的按钮、文字、布局，等 CSS 下载完再重绘——这就是 FOUC（闪一下、跳位、响应式断点失效）。IE6–8 更直接：忽略 <body> 中所有 <link>，整页白板。
实操建议：
-
<link>必须是<head>的直接子元素，不能嵌在<script>或<meta>里面 - 推荐顺序：
<title>→<link rel="stylesheet">→ 其他<script> - 别信“CSS 放底部能提速”——那是 JS 的逻辑，对样式表完全反效果
rel="stylesheet" 漏写、拼错或带空格会静默失效
浏览器只靠 rel 值决定是否启动 CSS 解析流程。rel="stylesheet" 是 HTML5 规范唯一认可的值。漏掉、写成 rel="style"、rel="css"、rel="StyleSheet"（大小写敏感）、rel="stylesheet "（末尾空格），标签就退化为普通链接：Network 面板能看到请求发出去了（甚至返回 200），但 Elements 面板 Styles 栏为空，控制台也不报错。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 检查
<link>是否同时包含rel="stylesheet"和href，二者缺一不可 - 别加过时属性
type="text/css"，现代浏览器默认就是它，写了纯属多占字节 -
href值必须用引号闭合：href="style.css"，不能写成href=style.css（部分解析器会截断）
href 路径错误导致 404，但不报错
href 的计算基准永远是当前 HTML 文件的 URL，不是你编辑器打开的目录，也不是 CSS 文件所在位置。写成 href="css/style.css"，HTML 在 /blog/article.html，实际请求的是 /blog/css/style.css，而非你本意的 /css/style.css。本地双击打开 file:// 协议时，相对路径还可能被安全策略拦截。
实操建议：
- 优先用根相对路径：
href="/css/style.css"（开头/表示从域名根目录算起） - 绝对 URL 适合 CDN：
href="https://cdn.example.com/v1.2.0/style.css"，注意协议一致 - 本地开发别双击打开 HTML，用
python -m http.server或vite preview启服务 - Network 面板点开那个 404 请求，看「Initiator」列，能直接确认是哪个 HTML 文件发起的
media 属性写错会让 CSS “条件性消失”
media 不是装饰属性。一旦写了但值不合法（比如 media="screen and (min-width:768px" 少了个括号），整个 <link> 会被浏览器视为无效，CSS 不加载也不报错。默认不写 media，等价于 media="all"，始终生效。
实操建议：
- 打印样式要加
media="print"，否则普通浏览下完全不生效 - 媒体查询调试时，先删掉
media属性验证基础加载是否正常 - 别在
media值里混用中文标点或全角空格
真正容易被忽略的，是 rel 的严格性和 href 的路径基准——它们不报错、不警告，只安静地跳过。调试时先盯死 Network 面板里那个 CSS 请求的状态码和响应内容，比反复改选择器高效得多。
