标签必须放在内，因浏览器自上而下解析HTML，若置于中会导致样式延迟应用、FOUC闪屏或被降级为文本节点。
<style></style> 标签必须放在 里，放错位置会导致样式不生效或页面闪屏。
为什么<style></style>不能写在
浏览器解析 HTML 是从上到下流式进行的。如果 <style></style> 放在 中（比如紧贴 后、 开始前），部分浏览器会将其视为“解析错误”，降级处理为普通文本节点；更常见的是，它虽被解析，但无法及时作用于已渲染的元素，造成无样式白屏或布局跳动。
真实踩坑场景包括：
- 手误把
<style></style>塞进 Vue / React 模板的<template></template>内部，当成 scoped style 用 - 用 PHP 或 Jinja 渲染时，条件判断块意外包裹了
闭合标签，导致<style></style>实际落在 - 复制粘贴时漏掉
，只留了<style></style>和
<style></style>里的@import为什么无效
HTML 内部样式表不支持 @import 规则——这不是兼容性问题，而是规范明确禁止。一旦你在 <style></style> 块里写了 @import url("base.css");，整段 CSS 会被浏览器忽略（Chrome DevTools 的 Styles 面板里直接不显示）。
立即学习“前端免费学习笔记（深入）”；
替代方案只有两个：
- 改用
<link rel="stylesheet">在中加载外部文件 - 把要 import 的规则手动复制进
<style></style>块（仅限极简项目）
注意：@media、@keyframes、@supports 这些都是允许的，唯独 @import 不行。
type 属性到底要不要写
HTML5 中 type="text/css" 是可选的，默认值就是它。写不写都不影响解析，但写了更明确，尤其当团队里有老项目或需要通过某些静态检查工具时。
不过要注意两点：
- 如果写了，值必须是
"text/css"，写成"css"或"style"会被忽略 - 不要写
type="text/scss"或类似值——浏览器不认识，整个<style></style>块失效
简单起见，建议省略；若需显式声明，就严格用 type="text/css"。
多个<style></style>标签的层叠顺序怎么算
多个 <style></style> 标签按它们在 中出现的**物理顺序**层叠。后出现的规则，只要选择器特异性相同，就会覆盖前面的。
例如：
<style>
.btn { color: blue; }
</style>
<style>
.btn { color: red; } /* 生效 */
</style>但如果你混入内联 style 属性（如 <button style="color: green"></button>），它的优先级（1000）永远高于任何 <style></style> 中的规则（哪怕用了 !important 也不行——等等，其实可以，但别这么干）。
真正容易被忽略的是：某些构建工具（如 Vite + Vue SFC）会在运行时动态注入 <style></style> 标签，它们的位置不可控，可能出现在你手写的 <style></style> 之前或之后，造成意料外的覆盖。
