穿透选择器 /deep/、＞＞＞、::v-deep用法分析

在Vue项目中，尤其是在使用组件化开发时（如elementUI），我们时常需要修改组件内部的样式，但Vue的样式封装特性（如<style scoped>）会阻止外部样式直接作用于组件内部。所以Vue社区引入了深度选择器（也称为穿透选择器或阴影穿透选择器），跨越组件的封装边界，对内部元素进行样式定制。

1. /deep/
Vue 2.x中的用法：/deep/是Vue 2.x中用于穿透组件样式封装的一种方式，类似于Sass的/deep/或/deep/的别名::v-deep（但Vue 2.x官方文档中并未直接提及::v-deep）。

兼容性：支持CSS预处理器（如Sass、Less）和CSS原生样式。

注意：在Vue 3.x中，/deep/不再被官方直接支持，虽然一些构建工具或库可能仍然兼容，但推荐使用::v-deep。

2. >>>
CSS原生语法：>>>是CSS原生中的深度选择器语法，用于穿透样式封装。但在Vue单文件组件（.vue）中，它并不总是被直接支持，因为Vue会将其视为普通CSS选择器的一部分。

兼容性：仅在某些特定环境（如Webpack的css-loader配置中）和原生CSS中有效，Vue单文件组件中通常需要特定配置才能使用。

注意：在Vue 3.x中，>>>同样不再被推荐使用，应使用::v-deep。

3. ::v-deep
Vue 3.x中的推荐用法：::v-deep是Vue 3.x中引入的官方深度选择器，用于替代Vue 2.x中的/deep/和原生CSS中的>>>。

兼容性：支持CSS预处理器和CSS原生样式，是Vue 3.x中推荐使用的深度选择器。

优点：与Vue 3的其他新特性相兼容，提供了更好的开发体验。