style标签必须放在head中，否则可能不生效或导致fouc；禁止在style中使用@import；多个style按顺序层叠，但内联style优先级最高；type属性若存在必须为text/css。
style标签必须放在里，否则可能不生效或闪屏
浏览器解析HTML是自上而下的流式过程。<style></style>标签如果出现在中（比如紧贴之后），部分浏览器会将其降级为普通文本节点；更多时候虽能解析，但样式无法及时作用于已渲染的元素，导致FOUC（无样式内容闪烁）——页面先白屏/错乱，再突然重绘。
常见手误包括：
• 复制粘贴时漏掉闭合标签，只剩<style></style>孤零零挂在开头
• 在Vue SFC或React JSX模板里，把<style scoped></style>误当成普通<style></style>直接塞进<template></template>内部
• PHP/Jinja模板中条件判断意外提前结束了
style标签里不能写@import，写了整段CSS会被忽略
@import在<style></style>块中是被HTML规范明确禁止的。不是兼容性问题，而是语法错误：一旦出现@import url("base.css");，整个<style></style>内容会被浏览器直接丢弃，DevTools的Styles面板里根本看不到它。
替代方案只有两个：
• 用<link rel="stylesheet">在中引入外部文件
• 把要@import的规则手动复制进<style></style>块（仅限极简项目）
注意：@media、@keyframes、@supports这些是允许的，唯独@import不行。
多个style标签按物理顺序层叠，但内联style永远更高
同在里的多个<style></style>标签，后出现的规则会覆盖前面同特异性的声明。比如：
<style>
.btn { color: blue; }
</style><style>
.btn { color: red; } /* 生效 */
</style>
但只要某个元素带了style属性，比如<button style="color: green"></button>，它的特异性就是1000，远高于<style></style>里任何选择器（哪怕p#id.class:hover也才111）。这种覆盖关系不受顺序影响，也很难被!important逆转——别这么干。
type属性不是可选的，但必须写成text/css
<style></style>标签的type属性不是必需的，但如果你显式写了，就必须是text/css。写成css、style甚至text/scss，浏览器都不认识，整块样式会被忽略。
建议：
• 省略type属性最安全
• 如果必须写，就严格用type="text/css"
• 不要试图用<style></style>加载预编译语法（Sass/Less），它只认原生CSS
真正容易被忽略的是构建工具动态注入的<style></style>——比如Vite + Vue SFC会在运行时把组件样式注入到DOM，它们的位置不可控，可能插在你手写的<style></style>之前或之后，造成意料外的覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
