vue 2 中应使用 ::v-deep，因其是官方支持、构建工具兼容且安全可控的样式穿透方案；/deep/ 已被弃用并触发警告，>>> 在 scss/less 中无法编译，二者均不可靠。
Vue 2 项目里改第三方组件样式，::v-deep 是最稳妥的选择，/deep/ 已被弃用且在新版构建工具中可能失效，>>> 在预处理器（如 SCSS）里基本无法编译通过。
为什么不用 /deep/ 和 >>>？
Vue CLI 3+ 默认禁用了 /deep/，控制台会报 [DEPRECATED] /deep/ combinator has been deprecated；而 >>> 是纯 CSS 特性，在 SCSS/Less 中会被解析为无效语法，直接导致构建失败或样式不生效。
-
/deep/是 Vue 2 早期的别名，现在仅作为兼容写法存在，不推荐新项目使用 -
>>>只在原生<style></style>中可用，一旦加了lang="scss"就会报错 -
::v-deep是 Vue 官方明确支持、Webpack 和 vue-loader 都能正确处理的方案
::v-deep 的两种写法与作用范围
关键不是“能不能写”，而是“写在哪”——位置错了就会全局污染或完全不生效。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 写在选择器内部：
.my-wrapper ::v-deep .el-input__inner { height: 40px; }→ 仅影响.my-wrapper下的.el-input__inner，安全 - 单独写在最外层：
::v-deep .el-input__inner { height: 40px; }→ 所有地方的.el-input__inner都会被改，极易误伤其他页面 - 不要嵌套多层
::v-deep，比如::v-deep ::v-deep .xxx，会导致编译异常或权重失控
实际调试时怎么快速定位目标类名？
别靠猜，直接看渲染后的 DOM 结构，因为第三方组件的 class 名往往和文档不一致（比如 Element UI 的 .el-select__tags 实际可能套在 <div> 里，也可能被动态加了 <code>is-focus 等状态类）。
- F12 打开开发者工具，用
Ctrl + F搜索组件关键词（如el-button、ant-btn），找到真实 class - 右键对应元素 → “Copy → Copy selector”，粘贴出来看看是否含
data-v-xxxxxx属性 —— 如果有，说明它确实被 scoped 包裹了，需要用::v-deep - 先在 Elements 面板里手动改样式验证效果，再把最终生效的规则复制进代码
容易被忽略的权重和覆盖陷阱
即使用了 ::v-deep，也不等于一定能覆盖成功。第三方组件常自带 !important，或者用内联 style，或者用更高 specificity 的选择器（比如 .el-button.is-primary:focus）。
- 优先检查目标样式是否带
!important，如果是，你的::v-deep规则也得加!important（但尽量避免） - 如果第三方用了行内 style（比如
:style="{ color: xxx }"），::v-deep无效，只能改 props 或用attr动态绑定 - 多个
::v-deep规则之间也有优先级，建议用更具体的父容器 class 限定范围，而不是裸写::v-deep .xxx
真正麻烦的不是写法本身，而是第三方组件内部结构经常随版本更新变动 —— 今天有效的 ::v-deep .el-dialog__headerbtn 下次升级 Element UI 后可能就变成 .el-dialog__close 了。所以每次升级依赖后，都得重新 inspect DOM。
