一文吃透 Vue2 / Vue3 的 ::v-deep、/deep/、>>>、:deep() 区别，结合 Element Plus 实战演示，顺便告诉你“为什么劝你别滥用”。

1. 为什么需要“深度选择器”？

在 .vue 文件里，只要给 <style> 加上 scoped 属性，Vue 就会自动为模板内的所有 DOM 节点打上一个哈希属性（如 data-v-7ba5bd90），并把样式选择器也后缀同一哈希，从而实现“样式隔离”。

编译前后对比：

/* 源码 */
.title { color: red; }
/* 编译结果 */
.title[data-v-7ba5bd90] { color: red; }

好处：父组件的样式不会泄漏到子组件。
副作用：父组件想改子组件内部样式也改不动了。
于是“深度选择器”应运而生——它允许你在 scoped 中“穿透”这一层隔离。

2. 语法速查表（Vue2 vs Vue3）

结论：
Vue2 项目统一用 ::v-deep；
Vue3 项目统一用 :deep()，别再写 /deep/ 或 >>> 了。

3. 最小可运行 DEMO（Vue3 + Vite）

下面用 Element Plus 的 el-button 做靶子，把按钮里的文字颜色改成渐变色。

<!-- DeepSelectorDemo.vue -->
<template>
  <section>
    <h3>3.1 默认样式</h3>
    <el-button>我是按钮</el-button>
    <h3>3.2 深度选择器覆盖后</h3>
    <el-button class="g-custom">我是按钮</el-button>
  </section>
</template>
<script setup>
/* 无需逻辑，纯样式演示 */
</script>
<style scoped>
/* 仅对第二个按钮生效 */
.g-custom :deep(span) {
  background: linear-gradient(45deg, #ff0066, #ffcc00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>

4. 编译结果揭秘

打开 DevTools → Elements → 选中按钮 → 观察 span 元素：

<span class="">
  我是按钮
</span>

注意：

1. 1. span 本身没有data-v-xxx 属性；
2. 2. 父元素 button.g-custom 有 data-v-7ba5bd90；
3. 3. 最终生效的 CSS 选择器是：

.g-custom[data-v-7ba5bd90] span { ... }

Vue 通过把哈希加在深度选择器左侧而非右侧，实现了“只穿透、不污染”。

5. 高频踩坑 5 连问

6. 最佳实践口诀

1. 1. 能不用就不用：先尝试子组件暴露 class / style / props 让父组件传值。
2. 2. “就近”深度：深度选择器尽量贴近目标元素，减少副作用范围。
3. 3. 一个组件一套深度：别把整站样式都写进一个 scoped 深度里，后期调试想哭。
4. 4. 升级 Vue3 立刻全局替换 /deep/ → :deep()，一劳永逸。
5. 5. 写 UI 库主题时，用官方提供的 theme 或 css var，深度选择器只是兜底。