为什么需要样式穿透？

在vue中，有时我们需要修改一些三方组件库如elementui某些组件的样式但又不想影响全局组件样式，这里我们就需要使用样式穿透来修改局部组件样式

提示

在vue中，使用样式穿透的前提是要在style标签上添加scoped属性

>>>

>>>是css原生属性，主要用来处理css module或有css作用域的情况。允许样式穿透到当前组件的作用域，影响作用到子组件或更深层次的元素。 >>>可以在不添加scoped属性的情况下生效，在预处理器中的兼容性不好，如果使用less或sass推荐使用下面几种方式。

.body >>> .table {
	width: 200px;
}

/deep/

/deep/同样是css中的功能与>>>功能相同，但似乎已被css删除，所以不推荐使用。在vue2中使用还是挺多的，使用前需要添加scoped属性，less和某些sass版本环境下可以使用该写法。不过vue3中官方已废弃该写法，虽然某些打包工具和库也提供兼容但目前是不推荐使用的。

.body /deep/ .table {
	width: 200px;
}

::v-deep

::v-deep和/deep/的功能相同使用条件也一样，不过一般在sass预处理器下使用，在vue3中同样不推荐使用

::v-deep()

::v-deep()同/deep/和::v-deep，是为vue2到vue3过渡使用的属性，在早期的vue3版本中可以使用，最新vue3推荐使用:deep()

:deep()

vue3官方推荐使用

总结

如果使用vue2推荐使用/deep/，vue3则使用官方推荐:deep()