<style> 标签必须放在 <head> 内，紧贴 <title> 或 <meta> 后；它同步阻塞解析，不支持 defer/async，语法同外部 CSS 但禁用 @import 和本地相对路径；优先级取决于特异性与顺序，内联 style 属性（1000）高于 <style> 中任何选择器（如 p{} 为1）。
HTML 中 <style> 标签该放哪？
必须放在 <head> 里，不能塞进 <body> 开头或中间。浏览器解析 HTML 是从上到下流式进行的，<style> 提前声明样式，才能让后续 DOM 元素渲染时立刻应用——否则可能闪屏（先无样式渲染，再重绘）。
常见错误现象：<style> 放在 </body> 前，页面短暂白屏或布局错乱；更隐蔽的是某些框架（如 Vue SFC）里误把 scoped style 当普通 <style> 直接塞进 body。
- 只允许出现在
<head>内，且建议紧贴<title>后或<meta>组之后 - 不支持
defer或async属性，它本身就是同步阻塞解析的 - 多个
<style>标签按出现顺序层叠，后写的规则可覆盖前面同优先级的
<style> 里写 CSS 有哪些限制？
它本质是嵌入式 CSS 容器，语法和外部 .css 文件完全一致，但不支持 @import（除非用 JS 动态注入）、不支持 CSS @layer 声明（部分新浏览器已支持，但兼容性差），也不能直接引用本地文件路径。
使用场景：小项目快速原型、邮件模板内联样式（因多数邮箱客户端禁外链）、SSR 渲染中为关键 CSS 提供首屏保障。
立即学习“前端免费学习笔记（深入）”；
-
@import url("xxx.css")在<style>中会触发额外 HTTP 请求，且阻塞渲染，应避免 - 不能写
url(./assets/icon.png)这类相对路径——浏览器按当前 HTML URL 解析，不是按文件系统 - 媒体查询、自定义属性（
--main-color）、CSS 变量均可正常使用
内联 style、<style> 和外部 CSS，优先级怎么算？
三者共存时，优先级只看 CSS 特异性（specificity）和声明顺序，跟“在哪写”无关。但实操中容易误判：
比如 <p style="color: red"> 是内联样式，特异性为 1000；而 <style>p { color: blue } 特异性只有 1 —— 红色一定会赢，哪怕它写在后面。
- 内联
style属性 ><style>或<link>中的任何选择器（除非加!important） - 同为
<style>中的规则，后写的会覆盖前面同特异性的声明 -
!important会打破常规优先级，但多个!important仍按特异性+顺序比
为什么有时 <style> 不生效？
最常见不是语法错，而是作用域或解析时机问题。比如在 Shadow DOM 中，<style> 默认只作用于 light DOM；或者用了 scoped（Vue）却没配对应 loader，导致样式被忽略。
另一个隐蔽坑：HTML 注释或非法字符混在 <style> 标签内，会导致整个块被浏览器丢弃（CSS 解析器遇到非法 token 就停）。
- 检查控制台是否报
Failed to parse CSS或类似错误信息 - 确认没有把
<script>或其他标签误写进<style>内部 - 若用构建工具（Vite/Webpack），确认未被插件自动移除或提取成外部文件
<style>，而是搞清它在哪个上下文里生效、被谁覆盖、又在什么条件下静默失效。 
