Vue单文件组件中默认全局生效，需加scoped属性实现局部作用域；::v-deep()可穿透一级子组件样式，多标签可混用但行为不同，lang属性和原子化CSS工具会影响其行为。
Vue单文件组件里
很多人写完 <style></style> 发现样式污染了其他组件，比如给 .btn 加了个背景色，结果所有页面的按钮都变了。这是因为 Vue 默认把 <style></style> 编译成全局 CSS，不加限制就和在 HTML 里直接写 <style></style> 没区别。
想只作用于当前组件，必须显式启用作用域隔离：
- 给
<style></style>标签加上scoped属性：<style scoped></style> - Vue 会自动为当前组件的每个元素添加唯一属性（如
data-v-f3f2d1e4），同时为选择器追加相同属性，实现“视觉上的局部作用域” - 注意：它不是真正的 Shadow DOM 隔离，只是属性选择器模拟，对动态插入的子组件、第三方弹窗类库（如 Element Plus 的
el-dialog）不自动穿透
怎么让scoped样式影响子组件或第三方组件
当你要修改子组件内部结构（比如一个 <mybutton></mybutton> 里套着的 <button></button>），或者覆盖 el-input 的边框颜色，scoped 默认不会生效——因为那些 DOM 不在当前组件模板内，没被加上 data-v-xxx 属性。
两种实用解法：
立即学习“前端免费学习笔记（深入）”；
- 用
::v-deep()（推荐）：写在scoped样式块里，能穿透一级子组件。例如：<style scoped><br> .my-form ::v-deep(.el-input__inner) {<br> border-color: #1890ff;<br> }<br></style> - 用
/deep/（已废弃但部分老项目还在用）或::v-deep（无括号写法，兼容性略差） - 更稳妥的做法：把需要深度控制的样式提到父级非
scoped块，或改用 CSS Modules（需构建配置支持）
多个
一个 .vue 文件里可以写多个 <style></style>，它们互不影响，但用途差异很大：
-
<style></style>（无属性）→ 全局样式，打包后直接注入，适合重置、字体定义、CSS 变量声明 -
<style scoped></style>→ 当前组件局部样式，带属性选择器，避免泄漏 -
<style module></style>→ 启用 CSS Modules，生成哈希类名，需通过$style.xxx在 template 或 script 中引用，适合高复用组件库场景 - 混合使用时注意顺序：全局样式应放在最前，避免被 scoped 覆盖；CSS Modules 类名不会被
::v-deep影响，因为它本身就不靠属性选择器
容易忽略的细节：lang 和 postcss 插件的影响
加了 lang="scss" 或 lang="less" 看似只是换语法，实际会改变作用域行为和编译链路：
-
<style lang="scss" scoped></style>中的嵌套写法（如.wrapper { .btn { ... } }）会被正确解析并带上data-v-xxx，但某些旧版sass-loader对::v-deep支持不好，建议升级到 v12+ - 如果用了 Tailwind、UnoCSS 这类原子化工具，
scoped会导致工具无法识别组件内 class 是否被使用，可能误删——得配content路径包含*.vue - 热更新时，修改
scoped样式有时不触发重绘，尤其是用了 CSS 变量或 @import 外部文件时，可尝试加force选项或清缓存
真正难的不是写对一个 scoped，而是搞清楚哪一层该用什么作用域、什么时候该放弃 scoped 改用模块化、以及哪些第三方组件结构你根本没法用 ::v-deep 控制——这时候就得看文档找 slot 或 theme 配置了。
