rel="stylesheet" 是浏览器启动 css 解析的唯一开关，漏写、拼错、大小写错误、引号缺失或末尾空格均导致链接被完全忽略，不发起请求、不解析样式、不报错，这是 html5 规范强制要求。
rel="stylesheet" 是浏览器启动 CSS 解析的唯一开关
浏览器根本不“猜”哪个 <link> 是样式表——它只认 rel="stylesheet" 这个字面值。漏写、拼错（比如 rel="style"、rel="css"）、大小写错误（rel="StyleSheet"）、引号缺失（rel=stylesheet）或末尾带空格（rel="stylesheet "），都会导致标签被完全忽略：Network 面板里压根看不到请求，Elements 面板中 Styles 栏为空，控制台也不报错。
这不是兼容性问题，是规范强制行为。HTML5 明确规定只有 rel="stylesheet" 才触发 CSS 下载、解析、注入渲染树的整套流程。其他任何值，哪怕语义接近，都只是普通链接。
为什么写错 rel 值后连 404 都看不到
因为根本没发请求。浏览器在解析到 <link> 标签时，第一步就是检查 rel 值；不匹配就跳过，不构造资源加载任务，不进 fetch 队列，不走网络栈。
-
<link href="style.css">→ 静默丢弃，无请求 -
<link rel="preload" as="style" href="style.css">→ 发请求，但作为普通资源加载，不参与样式计算 -
<link rel="stylesheet" href="style.css">→ 正常发起请求，解析 CSS 规则，影响渲染
href 路径和 <link> 位置会放大 rel 错误的影响
即使 rel="stylesheet" 写对了，如果 href 路径算错（比如误以当前 JS 文件为基准），或把 <link> 放进 ，问题会更难定位——你会看到 Network 里有 404 或 FOUC，容易误判为路径或顺序问题，而忽略最底层的 rel 是否生效。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
实操建议：
- 用根相对路径（如
href="/css/main.css"）避免路径基准混淆 -
<link>必须是的直接子元素，不要嵌套在<script></script>或其他标签内 - 所有属性值统一用双引号包裹，避免解析歧义
- 别加
type="text/css"——现代浏览器默认就是它，写了纯属干扰眼
alternate stylesheet 和 preload 不是替代方案
rel="alternate stylesheet" 是给用户手动切换主题用的，浏览器默认不启用；rel="preload" as="style" 只是提前抓取，不会自动应用样式。两者都不能绕过 rel="stylesheet" 的刚性要求。
真正关键的，永远只有那一行：<link rel="stylesheet" href="xxx.css">。其余所有优化（CDN、HTTP/2、缓存头）都建立在这个前提之上——它错了，后面全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
