CSS不生效的首要原因是rel="stylesheet"缺失或拼写错误，导致浏览器不解析CSS；其次为href路径基准错误（以HTML文件位置为准）及<link>未置于<head>中引发FOUC。
CSS不生效，90%是写错了位置、漏了rel="stylesheet"，或href路径算错基准——不是代码写得不对，而是浏览器压根没把它当样式表处理。
rel="stylesheet"必须显式写出，且大小写敏感
浏览器只靠rel值判断是否启动CSS解析流程。rel="stylesheet"是HTML5规范唯一认可的标识。漏掉这个属性，或者写成rel="style"、rel="css"、rel="StyleSheet"（大写S），标签就退化为普通链接：Network面板能看到200响应，但Elements面板的Styles栏为空，控制台也不报错——静默失效。
常见踩坑点：
- 复制别人代码时删掉了
rel属性，只剩<link href="main.css"> - 用构建工具生成
<link>，模板里误配成rel="preload"或rel="modulepreload" - 手写时拼错大小写，比如
rel="StyleSheet"（值区分大小写）
<link>必须放在<head>里，不能塞进<body>
浏览器解析HTML是流式自上而下的。<link rel="stylesheet">在<head>中，等于告诉浏览器：“先等样式准备好，再渲染DOM”。一旦放进<body>底部，页面会先无样式渲染（FOUC），文字闪一下、按钮跳位、响应式断点失效——移动端尤其明显。
立即学习“前端免费学习笔记（深入）”；
更隐蔽的问题：
- Next.js/Nuxt等SSR框架依赖服务端生成的HTML已含完整样式上下文，
<link>在<body>中会导致hydration失败 - 媒体查询（如
prefers-color-scheme）在CSS加载前已计算完毕，延迟加载等于放弃响应时机 -
@font-face定义在后置CSS中，文本会先用系统字体渲染，再重绘，造成FOIT/FOUT
href路径必须按HTML文件位置计算，别信“相对路径很直观”
href的计算基准永远是当前HTML文件的URL，不是编辑器打开的目录，也不是服务器根路径。例如HTML在/blog/article.html中写href="css/style.css"，浏览器实际请求的是/blog/css/style.css，而非你想要的/css/style.css。
验证和修复建议：
- 右键页面源码里的
href值 → “在新标签页中打开”，看能否直接显示CSS内容 - 打开Network面板，找404请求，点开看“Initiator”列，直接定位到哪个
<link>发起的 - 开发时统一用根相对路径：
href="/css/style.css"（开头带/），避免嵌套层级带来的歧义 - 本地双击
file://协议打开时，相对路径可能被浏览器安全策略拦截，务必用live-server或vite preview测试
多个<link>的顺序和media属性影响样式覆盖与首屏性能
CSS加载是串行阻塞的：浏览器按<link>出现顺序依次下载、解析、构建CSSOM。后加载的CSS规则可覆盖前面同选择器的声明，但顺序错乱会导致意料外的样式丢失或重绘。
推荐顺序和用法：
- 重置类（如
normalize.css）→ 框架（如bootstrap.min.css）→ 自定义样式（custom.css） - 非关键CSS用
media隔离：<link rel="stylesheet" href="print.css" media="print">，它仍会下载，但不参与初始渲染 -
type="text/css"已冗余，现代浏览器默认就是它，写了纯属多占字节 - 绝对URL（如CDN）适合外部资源，但需注意SRI校验是否配置
最容易被忽略的其实是路径基准和rel值的严格性——它们不出错，其他优化才有意义；一旦出错，连CSSOM都建不起来，后面所有样式逻辑都白搭。
