一：原因

在vue项目开发过程中，我们会引入三方ui库，比如Element ui ,Antd 等等，但是，

有时候我们需要进行对内部组件进行样式的修改，那么怎么处理呢，

vue由于样式封装特性会阻止外部样式直接用于组件内部

因此，官方提供了深度选择器来进行解决，实现跨域组件和封装边界，对内部元素进行定制，

说白了就是从父组件中穿透到子组件内部，直接修改子组件的样式

二：方式

1：>>>，是css原生的深度选择器，用于穿透样式封装，仅在某些特定环境

<style scoped>
.parent >>> .child {
  /* 样式规则 */
}
</style>

2：/deep/，（废弃），支持css预处理器

<style scoped>
.parent /deep/ .child {
  /* 样式规则 */
}
</style>

3：::v-deep，（废弃），支持vue2,vue3不支持

<style scoped>
.parent::v-deep .child {
  /* 样式规则 */
}
</style>

4：::v-deep()，vue2像vue3过渡性的组合选择器，支持vue3，但是编译会显示弃用并报警告

<style scoped>
.parent ::v-deep(.child) {
  /* 样式规则 */
}
</style>

5：:deep()，Vue3推荐使用，不兼容vue2

<style scoped>
.parent :deep(.child) {
  /* 样式规则 */
}
</style>

三：总结

1：>>> → /deep/ → ::v-deep → ::v-deep() → :deep()，从关系选择武器->伪元素->伪类

2：Vue2项目中使用::v-deep，Vue3项目中使用:deep()

3：有些兼容但是会报兼容性错误usage as a combinator has been deprecated. Use :deep() instead.

4：CSS预处理器对>>>支持下不佳，谨慎使用