Vue样式管理两大核心能力：CSS Modules实现类名哈希化与作用域隔离，解决命名冲突；:deep()提供可控的scoped穿透，专用于定制第三方组件样式，二者定位不同、常配合但不可替代。
Vue 中的样式管理有两个关键能力：一是用 CSS Modules 实现类名自动哈希化与作用域隔离，二是用 深度选择器（如 :deep()）有控制地穿透作用域。二者定位不同——CSS Modules 解决“命名冲突”，深度选择器解决“样式穿透”，常配合使用但不可互相替代。
CSS Modules：类名自动隔离，杜绝全局污染
CSS Modules 不是 Vue 专属，而是构建工具（如 Vite、Webpack）支持的模块化方案。启用后，每个类名会被编译为唯一哈希值，天然避免样式覆盖。
- 写法：在
<style module></style>标签中定义样式，类名通过$style对象注入模板 - 示例：
<template> <div :class="$style.container"> <span :class="$style.text">Hello</span> </div> </template> <style module> .container { margin: 1rem; } .text { color: #333; font-weight: bold; } </style> - 编译后类名类似
container_abc123，且仅在当前组件生效，第三方组件或父组件无法意外匹配到 - 注意：
module和scoped互斥，不能同时使用；它不依赖data-v-xxx属性，而是靠 JS 动态绑定类名
:deep()：精准穿透 scoped，只改需要改的部分
当使用 <style scoped></style> 时，子组件内部元素默认不受影响。:deep() 是 Vue 3 官方推荐的穿透语法，告诉编译器：“这部分选择器不加作用域属性”。
- 语法必须带括号，且只能用于伪类位置：
:deep(.el-input__inner)✅，.el-input :deep .el-input__inner❌（缺少括号） - 编译结果是
.parent[data-v-xxx] .el-input__inner——父选择器仍受作用域限制，子选择器完全放开 - 支持嵌套穿透：
:deep(:deep(.icon))可连续穿透两层，适合多级封装组件 - 慎用于挂载到
body的弹窗类组件（如<el-dialog></el-dialog>），因其 DOM 不在当前组件树内，:deep() 失效，此时应改用全局样式或:global()
何时用 CSS Modules？何时用 :deep()？
二者适用场景明确区分：
立即学习“前端免费学习笔记（深入）”；
-
CSS Modules：适合你完全掌控的组件体系，尤其是团队协作或大型项目中，防止
btn、header等通用类名冲突 - :deep()：专用于定制第三方组件库（Element Plus、Ant Design Vue 等）或他人封装的黑盒组件，你无法修改其源码，只能从父组件“打洞”式调整样式
- 组合用法常见：父组件用
scoped+:deep()调整子组件样式，子组件自身用module管理内部结构，既隔离又可控
兼容性与替代写法
旧项目可能还在用 /deep/ 或 ::v-deep，它们功能等价但已逐步淘汰：
-
/deep/在 Sass/Less 中易被误解析为除法，需写成\/deep\/转义 -
::v-deep是伪元素写法，Vue 2 和 Vue 3 都支持，但 Vue 官方文档已标注为“legacy” - 统一建议：新项目只用
:deep()，构建工具（Vite 默认）和 Vue 3.4+ 均原生支持，无额外配置成本
