<style>标签默认作用域是全局的，无论写在<head>还是<body>中，其CSS规则均作用于整个HTML文档，浏览器按选择器匹配应用样式，无原生局部作用域机制。
style标签默认作用域是全局的
不加任何修饰的 <style> 标签，无论写在 <head> 还是 <body> 里，样式都会作用于整个文档。浏览器解析时不会区分位置，只要 CSS 选择器匹配，就生效。比如你在 <body> 底部写 <style> .btn { color: red; } </style>，所有页面中带 class="btn" 的元素都会变红——哪怕它在 <head> 之前就已渲染。
常见错误现象：<style> 放在某个组件容器内部（比如 <div id="user-card"> 后面），误以为只影响该区域；结果发现其他模块的按钮也被改了颜色。
- HTML 规范从未定义“局部作用域”语义，
<style>天然无边界 - 多个
<style>块之间会叠加、覆盖，按 CSS 层叠规则（cascade）执行，不是按 DOM 顺序隔离 - 服务端模板渲染时动态插入
<style>，容易因重复注入导致样式冲突
scoped 属性已被废弃，不要依赖它
HTML5 曾引入 scoped 属性，意图让 <style scoped> 只作用于父元素及其子树。但主流浏览器（Chrome、Firefox、Safari）从未真正实现或已移除支持。当前所有现代浏览器都忽略该属性——写上等于没写。
Vue 早期版本（2.x）的 <style scoped> 是 Vue 编译器自己做的模拟（通过添加 data-v-xxx 属性选择器），和 HTML 原生 scoped 无关。Vue 3 仍保留该语法，但底层机制仍是编译时属性注入，不是浏览器原生能力。
立即学习“前端免费学习笔记（深入）”；
- 在纯 HTML 页面中使用
<style scoped>不会产生任何作用域限制 - 即使在 Vue SFC 中，
scoped对<slot>内容、子组件根节点、CSS 动画关键帧等场景也存在穿透行为 - 若需真隔离，应转向 Shadow DOM 或 CSS Modules，而非寄望于已失效的 HTML 属性
组件化开发中替代方案的实际选择
在 Vue/React 等框架里，“组件内样式”本质是工程链路问题，不是 HTML 标签能解决的。真正的隔离靠的是构建时处理或运行时封装。
-
<style lang="scss">：仅声明预处理器语法，不改变作用域；编译后仍是普通 CSS，需配合scoped或 CSS Modules 才有效 - CSS Modules（如
import styles from './Button.module.css'）：构建工具将类名哈希化，从源头避免冲突 - Shadow DOM（
this.attachShadow({mode: 'open'})）：浏览器原生作用域隔离，但要求自定义元素且不兼容老版 IE - BEM 命名约定（
.button--primary）：人工规避冲突，适合小型项目或遗留系统改造
注意：用 <style> 在组件文件中写样式，只是组织形式便利；真正起效的从来不是标签本身，而是配套的构建配置和运行时逻辑。
什么时候还该用原生 style 标签
直接在 HTML 文件中写 <style> 并非完全过时，但适用场景非常明确：
- 单页应用（SPA）的入口 HTML，用于设置根容器、加载状态、字体预加载等基础样式
- 邮件模板（Email HTML）：因多数邮件客户端禁用外部 CSS，只能靠内联或
<style>嵌入 - 微前端子应用的沙箱样式重置（如重置
body margin、font-family） - SEO 关键页面的首屏样式内联（Critical CSS），避免 FOUC
复杂点在于：一旦涉及多组件协作或主题切换，<style> 就必须配合 JS 动态切换 class 或注入新块——它本身不具备响应式或条件渲染能力。
