rel="stylesheet"是浏览器识别为样式表的唯一关键信号，漏掉或拼错则标签被忽略、不发起请求；必须与有效href配对，且标签须置于内。
rel="stylesheet" 不是可有可无的装饰，它是浏览器识别「这个 <link> 标签是用来加载 CSS 样式表」的唯一关键信号。漏掉、拼错或写成 rel="style"、rel="css"，浏览器就直接忽略该标签，连请求都不会发。
为什么没有 rel="stylesheet" 就不加载？
浏览器解析 <link> 时，只根据 rel 值决定资源用途：rel="icon" 加载 favicon，rel="preload" 预加载资源，而只有 rel="stylesheet" 才触发 CSS 解析和样式应用流程。其他值（包括空值、缺失）一律视为普通外部资源，不参与渲染管线。
常见错误现象：
- Network 面板里完全看不到
style.css的请求（不是 404，是根本没发） - HTML 正常渲染，但页面纯白或默认样式，开发者工具 Elements 面板中
下的<link>标签显示为“未启用”状态 - 检查元素时，Computed 样式里看不到任何来自该 CSS 文件的规则
rel="stylesheet" 必须和 href 一起出现
rel="stylesheet" 单独存在毫无意义；它必须与有效的 href 属性配对，且 href 不能为空或仅含空格。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 始终用双引号包裹属性值：
rel="stylesheet"✅，不要写rel=stylesheet❌（某些 HTML 解析器会出错） - 检查是否误加了空格：
rel = "stylesheet"或rel=" stylesheet "都会导致失效 - 避免混淆大小写：HTML 中
rel值不区分大小写，但写成REL="STYLESHEET"易读性差，也易引入拼写误差 - 不要混用过时属性：
type="text/css"已被现代浏览器废弃，写了不报错但没必要，反而增加维护负担
它和 @import 的 rel 值完全不同
CSS 文件内部若用 @import 引入另一个 CSS，那个语句不依赖 rel——因为 @import 是 CSS 语法，不是 HTML 标签。但 HTML 中的 <link> 标签一旦用了 rel="import" 或 rel="prefetch"，就完全不会当样式表处理。
关键区别：
-
<link rel="stylesheet" href="a.css">→ 浏览器并行下载、阻塞渲染、参与层叠 -
<link rel="prefetch" href="b.css">→ 浏览器可能预取，但绝不会解析为样式 -
@import url("c.css");（在 a.css 里）→ 同步串行加载，延迟渲染，无法被浏览器预加载机制优化
所以别指望用 rel="prefetch" + JS 后续手动注入来替代 rel="stylesheet"，那绕远路还丢功能。
为什么旧版 IE 对它更敏感？
IE6–8 不仅要求 rel="stylesheet" 存在，还严格校验拼写和位置：如果 <link> 写在 里，哪怕 rel 完全正确，IE 也会静默忽略。这不是 bug，是当时规范实现的硬性限制。
这意味着：
- 即使你确认
rel="stylesheet"拼写正确，也要检查标签是否真的在内 - 用构建工具自动插入
<link>时，确保生成逻辑不会意外把它塞进 - 服务端渲染（SSR）模板中，
注入点必须明确，不能依赖客户端 JS 补救
真正容易被忽略的点：很多现代开发环境默认兼容最新浏览器，但上线后遇到企业内网老系统访问，问题就出在这些看似“古董级”的约束上——rel="stylesheet" 看似简单，却是整个外部样式加载链最前端、最不可妥协的守门人。
