rel="stylesheet"必须严格写对，是浏览器启动css解析的唯一开关；漏写、拼错、大小写错误或末尾空格均使其退化为普通链接，不构建cssom、无报错但样式静默失效。
link 标签必须写在 里，且 rel="stylesheet" 一个字母都不能错——漏掉、拼错、多空格、大小写混用，样式就彻底不生效。
为什么 rel="stylesheet" 写错等于没写
浏览器只靠这个值决定“要不要启动 CSS 解析”。写成 rel="style"、rel="StyleSheet"、rel="stylesheet "（末尾有空格），甚至直接不写 rel，标签就退化为普通链接：Network 面板能看到 200 响应，但 Elements 的 Styles 面板空空如也，控制台也不报错。
-
<link href="main.css">→ 静默失效，文件可能下载但 CSSOM 不构建 -
<link rel="preload" href="main.css">→ 浏览器只预加载，不解析样式 -
<link rel="alternate stylesheet" href="theme.css">→ 这是备用样式，需 JS 手动切换才启用
href 路径算错，90% 的 404 都在这儿
路径永远以当前 HTML 文件的 URL 为基准，不是编辑器打开的目录，也不是服务器根路径。比如 HTML 在 /blog/article.html，写 href="css/style.css"，浏览器实际请求的是 /blog/css/style.css。
- 开发时右键源码里的
href值 → “在新标签页中打开”，能直接看到 CSS 内容才算通 - Network 面板里找 404 请求，点开看 “Initiator” 列，直接定位是哪个
link搞的鬼 - 推荐统一用根相对路径：
href="/css/style.css"（开头带/），避免嵌套层级带来的歧义 - 构建工具（Vite/Webpack）生成带 hash 的文件名（如
main.a1b2c3.css）时，硬编码href="main.css"必然 404 —— 必须由插件注入真实路径
link 放在
它不会报错，但会触发 FOUC（Flash of Unstyled Content）：页面先无样式渲染一次，等 CSS 下载完再重绘。文字跳位、按钮错位、媒体查询失效，移动端尤其明显。
- IE6–8 直接忽略整个
link - SSR 场景（如 Next.js）下，
link在中会导致 hydration 不一致 - 动态插入（如
document.head.append(link)）只是把 FOUC 变成可预期的闪屏，不解决本质问题 - 多个
link的顺序影响样式覆盖：重置类（reset.css）放最前，框架样式（bootstrap.css）居中，项目主样式（main.css）放最后
最容易被忽略的其实是 media 属性——写成 media="screen and (min-width: 768px)" 没问题，但写成 media="print" 或拼错值，CSS 就“条件性消失”，连 Network 请求都不会发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
