>>>、/deep/、::v-deep、::v-deep()、:deep()区别及用法

现象：在Vue.js项目中，在使用组件化开发时，经常需要修改组件内部的样式，但Vue的样式封装特性（如<style scoped>）会阻止外部样式直接作用于组件内部。

引入穿透选择器： 在Vue.js 中， >>> 、 /deep/ 、 ::v-deep 、 ::v-deep() 和 :deep() 都是用于穿透组件样式封装的选择器。

作用：使父组件的样式能够影响到子组件的 DOM。深度选择器允许从父组件中穿透到子组件内部，可直接修改子组件的样式。能够跨越组件的封装边界，对内部元素进行样式定制。同时在需要定制第三方UI库组件样式时尤为有用。

1. >>> （深度选择器）

CSS原生中的深度选择器语法，用于穿透样式封装。

在Vue单文件组件中，通常会搭配CSS预处理器使用，需要配置支持。

Sass等预处理器无法正确解析>>>，因为Vue会将其视为普通CSS选择器的一部分。因此不推荐使用‌。

<template>  
  <div class="parent">  
    <ChildComponent />  
  </div>  
</template>

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

2. /deep/

是Vue 2.x中用于穿透组件样式封装的一种方式，类似于Sass的/deep/或/deep/的别名::v-deep。

它支持CSS预处理器（如Sass、Less）和CSS原生样式。

在Vue 3.x中，虽然一些构建工具或库可能仍然兼容，/deep/不再被官方直接支持，。

<style scoped>
/deep/ 类名 {
  /* 样式 */
}
</style>

3. ::v-deep

用于替代原生CSS中的>>>和Vue 2.x中的/deep/。它支持CSS预处理器和CSS原生样式。

<style scoped>  
::v-deep 类名 {  
  /* 样式 */  
}  
</style>

4.::v-deep()

‌ 是Vue 3 Composition API中的特殊用法。通过v-deep()函数在<style scoped>中使用，用于穿透组件样式封装‌。

<style scoped>  
::v-deep(类名) {  
  /* 样式 */  
}  
</style>

5.:deep()

‌ 是Vue 3是官方推荐的深度选择器。通过deep()函数在<style scoped>中使用，用于穿透组件样式封装‌。

<style scoped>  
:deep(类名) {  
  /* 样式 */  
}  
</style>

总结

• >>>和/deep/用于穿透样式封装，由于>>>Sass等预处理器无法正确解析>>>，需要配置支持、/deep/ 是一种较旧的语法，存在兼容性问题，推荐使用::v-deep。

推荐使用：因为它们是更标准的 CSS 伪元素语法，且以避免可能的编译错误‌。

• Vue2： ::v-deep
• Vue3：:deep()

>>> → /deep/ → ::v-deep → ::v-deep() → :deep() // 关系选择器 → 伪元素 → 伪类