<style> 标签必须放在 <head> 中才符合规范且稳定生效；写入 <body> 会导致 FOUC、媒体查询失效、CSS 变量未定义及层叠顺序混乱等问题。
<style> 标签必须放在 <head> 里才符合规范、能稳定生效；写进 <body> 中看似“也能用”，实则埋着 FOUC、选择器失效、媒体查询不触发等隐性问题。
为什么浏览器会“勉强解析”body里的style但效果不可靠
浏览器在解析 HTML 时，遇到 <style> 出现在 <body> 中，会按“容错修复”逻辑尝试处理：部分引擎（如 Chromium）会把它移到 <head> 后再解析，但这个过程不保证时机——DOM 已开始渲染，样式规则却还没注入 CSSOM。结果就是：
-
body { margin: 0; }写在<body>开头，页面仍出现默认边距 -
@media (prefers-color-scheme: dark)完全不触发，:root变量未定义 - 后续通过 JS 动态插入的同名规则可能意外覆盖它（层叠顺序混乱）
head里style和body里style的层叠优先级差异
优先级不是“谁写得晚谁赢”，而是由“插入位置 + DOM 构建顺序”共同决定：
-
<head>中的<style>在解析阶段就进入 CSSOM，对所有后续元素有效 -
<body>中的<style>是在构建 DOM 树中途插入的，只对它之后出现的元素“有机会”生效 - 如果两个
<style>都定义了#app { color: red; }，<body>里的那个实际可能被跳过——因为对应元素已渲染完毕，重绘成本高，浏览器可能直接忽略
动态插入style时append到body是常见错误
很多前端库或插件在运行时生成样式并插入 DOM，容易写出类似这样的代码：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
const style = document.createElement('style');
style.textContent = 'button { background: blue; }';
document.body.appendChild(style); // ❌ 错误：应 append 到 head
这会导致样式延迟应用，甚至在 SSR 或 hydrate 场景下完全不生效。正确做法始终是：
- 用
document.head.appendChild(style) - 若需条件加载（如暗色模式切换），也应在
<head>内管理，而非追加到<body> - 构建工具（Vite/Webpack）最终注入的
<style>也默认走document.head，保持行为一致
真正棘手的不是“能不能用”，而是“什么时候失效、为什么查不到原因”——比如媒体查询在开发环境正常，上线后因构建流程或 CDN 缓存导致 <style> 被意外塞进 <body>，问题难以复现。规范位置不是教条，是浏览器渲染流水线的硬性依赖点。
