rel="stylesheet"是浏览器识别css的唯一开关，漏写、拼错、多空格或大小写错误均导致标签被静默忽略，network无请求、computed为空。
rel="stylesheet" 是浏览器识别 CSS 的唯一开关
浏览器不会凭文件扩展名或内容自动把 <link> 当成样式表——它只认 rel="stylesheet" 这个固定值。漏写、拼错、多词、加空格，都会让整个标签被忽略，Network 面板里根本看不到 CSS 请求。
-
rel="style"、rel="css"、rel=" stylesheet "（前后有空格）全都不生效 -
rel="stylesheet alternate"是合法但语义不同，浏览器按 alternate 处理，不应用样式 - 某些构建工具（如 Vite）在开发时可能宽容，但生产环境或旧版 Safari/IE 会直接跳过
- 如果用了
<link rel="preload" as="style" href="...">，这只是预加载，不触发解析，必须另配一个rel="stylesheet"才行
怎么快速验证 rel 属性是否生效
打开开发者工具 → Network → 刷新 → 筛选 css，如果列表为空，且 HTML 中确有 <link> 标签，大概率就是 rel 出问题。右键检查该标签，在 Elements 面板里确认属性值是否完全匹配 rel="stylesheet"，注意引号是英文、无多余空格、大小写一致。
- 临时改成
rel="stylesheet"+href指向一个已知能访问的 CSS（如https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css），看是否立刻生效 - 不要依赖“看起来像”——复制粘贴比手敲更可靠，尤其避免中文引号、全角空格混入
- Vue / React 单文件组件中动态插入
<link>时，JS 字符串拼接容易漏掉rel，建议用document.createElement('link')显式设置属性
rel 错误常和其它问题叠加出现
比如你改对了 rel，却仍没效果，很可能是路径或服务器响应头同时出问题。此时 Network 里能看到 CSS 请求，但状态码是 404 或 Content-Type 是 text/plain。所以 rel 是第一道门，过了这关才轮到查路径、media、编码、覆盖规则这些。
- 只要 Network 里没请求，就别急着调 CSS 选择器或 !important —— 先盯死
rel - 多人协作时，有人用编辑器自动补全插件生成
<link rel="import">，这种错误肉眼难辨，务必手动核对 - HTML 模板引擎（如 EJS、Nunjucks）中变量插值若为空，可能产出
rel=""，等价于缺失，需加默认值兜底
rel="stylesheet" 这七个字母里少了一个 s、多了一个空格、或者引号是中文的。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
