rel="stylesheet"漏写或拼错会导致CSS静默失效；必须严格小写、带引号、无空格，且href路径须以HTML文件为基准，link必须置于head内，否则触发FOUC或被忽略。
rel="stylesheet" 漏了或拼错了就等于没写
浏览器只靠 rel 属性值决定是否启动 CSS 解析流程。rel="stylesheet" 是 HTML5 规范唯一认可的标识，大小写敏感、不能多词少词、不能带空格。写成 rel="style"、rel="StyleSheet"、rel="stylesheet "（末尾空格），甚至漏掉整个 rel 属性，标签就退化为普通链接：Network 面板能看到 200，但 Elements 面板 Styles 栏为空，控制台也不报错 —— 静默失效。
常见错误现象：
• Network 面板里看不到 CSS 请求
• <head> 下有 <link>，但 Styles 面板空白
• 右键点击 href 值在新标签页打开，返回的是 HTML 页面或 404，而非纯 CSS 文本
href 路径算错了基准，浏览器根本没发请求
href 的计算基准永远是当前 HTML 文件的 URL，不是编辑器目录结构，也不是服务器根路径。比如 index.html 在 /blog/article.html，而 CSS 放在 /css/style.css，却写了 href="css/style.css"，实际请求的是 /blog/css/style.css，必然 404。
- 用浏览器 Network 面板筛选
css，看状态码是不是 404 或 0（file:// 协议下跨目录常被拦截） - 右键点击
<link>中的href值 → “Open in new tab”，确认能否直接看到 CSS 内容 - 临时改成绝对路径测试，如
href="/css/style.css"，快速排除相对路径歧义 - 构建工具（Vite/webpack）中注意：public 目录和 src/assets 的输出路径不同，
href必须匹配构建后的真实路径，不是源码路径
link 标签不在 head 里，或者被动态插入
<link rel="stylesheet"> 必须是 <head> 的直接子元素。放在 <body> 里，等于告诉浏览器：“先画页面，CSS 慢点来”。结果就是 FOUC（文字跳位、断点失效），IE6–8 更直接忽略整页样式。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的细节：
• <link> 不能嵌在 <script> 或 <meta> 里
• 不要用 JS 动态插入 <link> 来“优化首屏”，那只是把 FOUC 变成可预期的闪屏
• 推荐 <title> → <link rel="stylesheet"> → 其他 <script> 的顺序
• 多个 <link> 之间不要加 async 或 defer（对 CSS 无效，反而可能干扰解析）
服务器返回的 Content-Type 不是 text/css
即使路径正确、标签完整、文件存在，如果服务器响应头中 Content-Type 不是 text/css（例如返回了 text/plain 或 application/octet-stream），现代浏览器会拒绝解析该 CSS，控制台明确报错：Refused to apply style from 'xxx.css' because its MIME type is not 'text/css'。
排查方式：
• Network 面板点击 CSS 文件 → Response Headers → 查看 Content-Type 是否为 text/css
• 本地调试时避免用 Python 2 的 SimpleHTTPServer，改用 python3 -m http.server（默认支持正确 MIME）或 live-server
• Nginx/Apache 需确保配置了 types { text/css css; } 类似映射
• 构建工具如 Vite 默认处理得当，但自定义 server 配置时容易遗漏
rel 和 href 这两个字段的微小偏差 —— 它们不报错、不警告，只让整个样式链静默断裂。检查时优先盯死这两点，比翻 CSS 规则本身高效得多。 
