<link>必须放在<head>中，否则导致FOUC、IE忽略或样式不生效；rel="stylesheet"缺失或错误、href路径不准、media语法错误等均会静默失效。
<link> 必须写在 <head> 里，放错位置会导致页面闪白、样式不生效，甚至旧版 IE 直接忽略。
为什么 <link rel="stylesheet"> 不能放在 <body> 中
浏览器是流式解析 HTML 的，遇到 <link rel="stylesheet"> 就会暂停渲染，等 CSS 下载并解析完才继续。如果它在 <body> 里，DOM 已经开始渲染，但样式还没加载——结果就是 FOUC（无样式内容闪现）。IE6–8 更极端：直接跳过 <body> 里的 <link>，整页没样式。
常见错误现象：
- 页面先白屏/乱排版，1 秒后突然“弹”出样式
- 本地双击打开 HTML 文件时样式正常，但部署到服务器就失效（路径+位置双重问题）
- SSR 或静态站点生成器中，服务端输出的 HTML 和客户端 hydration 不一致
href 路径写错是 90% 的“CSS 不生效”原因
路径基准永远是当前 HTML 文件的 URL，不是编辑器当前目录，也不是 CSS 文件所在位置。Network 面板看到 style.css 返回 404，基本就是它。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 优先用根相对路径：
href="/css/main.css"（开头/表示从域名根目录算起） - 相对路径要严格按 HTML 位置推算：若 HTML 在
/blog/post.html，想引用/css/reset.css，得写href="../css/reset.css"，不是./css/reset.css - 本地开发时别双击打开 HTML，用
python -m http.server或 Vite 启服务，避免 file:// 协议下路径解析异常 - 检查 Network 面板的 “Initiator” 列，能直接定位是哪个 HTML 文件发起了失败请求
rel="stylesheet" 漏写或拼错会静默失败
没有 rel="stylesheet"，浏览器根本不会把它当样式表处理——不发请求、不报错、Elements 面板里能看到标签但 Styles 面板为空。这是最隐蔽的坑。
容易踩的坑：
-
rel="style"、rel="css"、rel= stylesheet（缺引号）、rel="stylesheet "（末尾空格） -
type="text/css"可以删，现代浏览器默认识别，写了不报错但多余 - 多个
<link>按顺序加载，后引入的同权重规则会覆盖前面的——改了 CSS 没反应，先查是否被后面某个<link>覆盖了
media 属性写错会让 CSS “条件性消失”
media 不是可选项，一旦写了就必须合法。比如 media="screen and (min-width:768px" 少了个右括号，整个 <link> 就会被浏览器视为无效，CSS 不加载也不报错。
使用场景：
- 响应式分屏：
media="print"专用于打印样式 - 设备适配：
media="(max-width: 767px)"加载移动端专属样式 - 慎用
disabled：设为true会禁用该样式表，但 JS 修改它不会触发重排，需手动sheet.disabled = false并调用sheet.ownerNode.disabled = false
真正难调试的从来不是 CSS 写法，而是 <link> 标签里那几个看似简单的属性：位置、rel、href、media——它们不报错、不警告，只安静地跳过，等你花半小时翻遍所有 CSS 文件才发现，rel 少了个字母，或者 href 多了个点。
