style标签必须放在<head>里才参与首次渲染；写进<body>中的style根本没机会参与首屏样式计算，因浏览器自上而下解析HTML，<head>中的style在DOM构建早期注入CSSOM，而<body>中的style出现时DOM已开始或完成渲染，无法回溯重绘已挂载节点。
style 标签必须放在 <head> 里才参与首次渲染；写进 <body> 中的 style 不是“优先级低”，而是根本没机会参与首屏样式计算。
浏览器解析顺序决定样式是否生效
HTML 是自上而下流式解析的。<head> 中的 style 在 DOM 构建早期就注入 CSSOM，所有后续元素都能立即应用规则；<body> 里的 style 出现时，DOM 已开始或已完成渲染，浏览器不会回溯重绘已挂载的节点。
- 现象：写在
<body>开头的body { margin: 0; }仍显示默认边距 - 原因：
<body>元素本身已在解析<style>前创建并布局完毕 - DevTools 的 Elements 面板里能看到该规则，但 Computed 标签页中不生效
媒体查询和 CSS 变量在 body 内 style 中失效
@media 查询、:root 变量声明等依赖完整 CSSOM 构建时机的功能，在 <body> 中的 style 里大概率不触发。
-
@media (prefers-color-scheme: dark)完全不响应，即使系统设为深色模式 -
:root { --primary: #333; }被忽略，后续用var(--primary)的地方 fallback 到初始值 - 部分 Chromium 版本会尝试“修复”位置（移到
<head>），但时机不可控，不能依赖
动态插入 style 必须 append 到 head
JS 创建的 style 节点如果 appendChild 到 document.body，会导致样式延迟、SSR hydration 失败、甚至完全不生效。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
document.body.appendChild(style) - 正确写法：
document.head.appendChild(style) - SSR 场景下（如 Next.js），
<body>中的style在服务端渲染阶段被跳过，客户端 hydrate 时也无对应节点可复用 - 第三方库（如某些 UI 组件）若默认插到
body，需手动 patch 或配置注入目标
层叠顺序不是“后来者居上”，而是 DOM 插入时机决定
两个同名规则（比如都定义了 #app { color: red; }），谁生效不取决于书写顺序，而取决于它所在的 style 节点何时被插入 CSSOM。
-
<head>中的style：解析阶段即注入，对全部元素有效 -
<body>中的style：DOM 构建中途插入，只可能影响其后出现的元素 - 如果目标元素已渲染完毕，浏览器通常跳过重绘——这不是 bug，是性能优化
真正关键的不是“哪个优先级高”，而是“它有没有被纳入首次渲染流程”。把 style 放进 <body> 就等于主动放弃对首屏样式的控制权。
