标签必须放在中，因html5规范明确要求其仅为的合法子元素；置于虽可能被浏览器容错解析，但会导致fouc、媒体查询失效、css变量未定义及层叠顺序混乱等问题。
style 标签不是“临时样式”的快捷入口，它是页面级嵌入式样式的正式载体——写进去的规则会作用于整个页面所有匹配元素，且优先级高于外部 CSS（但低于行内 style 属性）。所谓“临时”，往往指开发调试、单页独有布局或 SSR 中避免 FOUC 的关键样式，而非可随意删改的草稿。
为什么 style 标签不能随便塞进
浏览器允许解析，但不符合 HTML5 规范，可能导致：CSSOM 构建延迟、FOUC（内容闪动）、SEO 工具误判、构建工具报 warning。W3C 明确要求 style 必须位于 内（type="text/css" 可省略，但保留更清晰）。
- ✅ 正确位置：
<style>h1 { color: #333; }</style> - ❌ 危险写法：
<style>...</style>（即使渲染正常，也埋下维护隐患） - ⚠️ 注意：
<style></style>块内不支持@import，要用则必须用<link>引入外部文件
style 标签里写伪类或媒体查询会失效吗
不会失效——style 标签完全支持现代 CSS 特性，包括 :hover、@media、@keyframes、CSS 变量（--primary-color）等。但它不支持选择器嵌套（如 .card .header 是合法的，但 .card { .header { ... } } 不是），也不支持 !important 的跨源覆盖逻辑（它只是普通嵌入式样式，权重仍受特异性约束）。
- ✅ 合法：
<style>button:hover { opacity: 0.8; } @media (max-width: 768px) { .nav { display: none; } }</style> - ❌ 无效：
<style>.btn { &:hover { ... } }</style>（这不是 CSS，是 Sass 语法） - ⚠️ 风险点：若外部 CSS 用
!important定义了color，而你内部没加，那内部规则可能被无视——别依赖位置靠后就一定赢
多个 style 标签共存时，谁覆盖谁
层叠顺序由两层决定：一是选择器特异性（specificity），二是文档流中出现的先后。同特异性下，后出现的 style 块里的规则胜出；不同特异性，则高者优先（例如 #header h1 永远压过 h1，无论位置）。
- ✅ 安全做法：给业务页面的
style加唯一前缀，如.page-dashboard h2，避免和全局 CSS 冲突 - ❌ 高危操作：在模板中动态插入
style标签却不控制加载顺序，导致 A/B 测试样式被基础样式悄悄覆盖 - ⚠️ 构建时注意：Webpack/Vite 默认不会处理
<style></style>块内的相对路径（如background: url(./img.png)），需额外配置或改用绝对路径/CSS 变量
真正容易被忽略的是：一旦你开始在两个不同页面的 <style></style> 块里写几乎一样的按钮样式，就说明该抽离为 class 或外部 CSS——style 标签天生不适合复用，它的价值只在“当前页专属”和“不可外移”的上下文中成立。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
