link标签缺rel属性或rel值错误（如stylesheet拼错、大小写错误、空值、无引号）会导致浏览器完全忽略该标签，不发起请求、不解析CSS、不构建CSSOM，页面白屏或FOUC，且控制台无报错。
link标签没写rel属性，浏览器直接忽略整条标签
浏览器把没有rel的<link>当成无效声明，既不发起网络请求，也不尝试解析资源。哪怕href指向一个真实存在的.css文件，样式也完全不会加载——Elements面板里看不到规则，Computed里空空如也，Network里连请求都不存在。
- 不是“加载失败”，而是“压根不处理”：HTML5规范明确要求
rel是强制属性，缺了就跳过整条<link> - 常见误写：
<link href="main.css">（漏rel）、<link rel="" href="main.css">（空值）、<link rel=stylesheet href="main.css">（没引号，部分解析器截断） - 编辑器或Linter通常不报错，但Chrome DevTools的Network面板能看到该资源根本没出现在请求列表中
rel="stylesheet"拼错或大小写错误，CSS照样静默失效
浏览器只认rel="stylesheet"这个精确字符串。写成rel="styleSheet"、rel="css"、rel="StyleSheet"甚至末尾多一个空格rel="stylesheet "，结果都一样：标签被当作普通链接，CSS不加载、不解析、不参与层叠。
- 大小写不敏感？错。HTML5中
rel值是大小写敏感的，Stylesheet或STYLESHEET均无效 -
type="text/css"不能补救：加了也没用，浏览器根本不进CSS解析流程 - 控制台不报错，也没有警告——FOUC（闪屏）或白屏是唯一可见线索
rel属性写在link标签外或嵌套在其他标签里，同样不生效
rel必须是<link>的直接属性，且<link>本身得是<head>的直接子元素。把它包在<script>里、塞进<meta>后面、或者放在<body>中，都会导致行为异常。
- 放在
<body>里：部分旧版IE直接忽略；现代浏览器虽可能发请求，但会触发FOUC，移动端尤其明显 - 嵌套在
<script>内：<script><link rel="stylesheet" href="a.css"></script>——浏览器只当它是脚本内容里的字符串，不解析为DOM节点 - SSR场景下（如Next.js静态导出），这种结构会导致服务端渲染时按钮/导航栏无样式，客户端hydration再补，视觉跳变不可避免
rel值用错场景，比如给JS或图片加rel="stylesheet"
把rel="stylesheet"用在非CSS资源上，浏览器会尝试请求，但因MIME类型不匹配而拒绝应用——它仍然走CSS解析流程，只是中途失败。
立即学习“前端免费学习笔记（深入）”；
-
<link rel="stylesheet" href="app.js">：请求发出去了（Network里看到200），但控制台报MIME type ('application/javascript') is not a supported stylesheet MIME type -
<link rel="stylesheet" href="logo.png">：同理，报MIME type ('image/png') is not a supported stylesheet MIME type - 这类错误常出现在复制粘贴模板时路径改了但
rel没同步更新，或者用构建工具自动生成<link>却硬编码了rel="stylesheet"
rel不是“锦上添花”的可选字段，它是浏览器执行资源加载逻辑的开关。少一个字母、错一个位置、混一个值，整个链路就断在第一步——而且不报错、不提示，只留给你一个“样式怎么就是不生效”的困惑。 
