这篇文章主要介绍vue 样式穿透 ::v-deep 的具体使用，文中通过示例代码介绍的非常详细，

之前项目使用了vant,使用非常简单 ，而且组件也非常的丰富。即使这样，在项目中vant组件自身的样式还是会满足不了需求，这个时候需要用额外的样式来修改组件样式。直接在<style lang="scss" scoped>...</style>中编写的话只会影响当前组件内的样式，但如果去掉scoped话又会影响全局样式。想了好多方法，都没得到很好的解决。

深度作用选择器

如果你希望scoped样式中的一个选择器能够作用得更深，例如影响子组件，你可以使用>>> 操作符

<style scoped> .a >>> .b{/* .... */} </style>

上述代码将会编译成 .a[data-vf3f3eg9] .b{/* ..... */}

1.  >>> 

如果vue 的style使用的是css,那么可以使用

<style lang=“css” scoped>

.a >>> .b{/* .....*/}

</style>

但是像scss等预处理器无法解析 >>> ，所以我们使用下面的方式

2 /deep/

<style lang="scss" scope>

.a {

/deep/ .b{

/* .... */

}

}

</style>

但是有些开发者反应，在vue-cli3编译时，deep的方式会报错或者警告

此时我们可以使用第三种方式

3 ::v-deep

切记必须是双冒号

<style lang="scss" scoped>

.a{::v-deep .b{/* ....*/}}

</style>

使用场景：当我们需要覆盖element-ui中的样式时只能通过深度作用选择器

style 为css时的写法如下

.a >>> .b{

}

style 使用css的预处理器（less ,sass,scss）时写法如下

第一种

/deep/ .a{

}

第二种

::v-deep

建议使用第二种方式，/deep/在某些时候会报错，::v-deep更保险且编译速度更快