在使用vant组件时，时常会遇到自己写的CSS样式无法覆盖vant中CSS样式的问题，这个时候就需要用到深度作用选择器，在查阅资料后总结出关于深度作用选择器的一些方法。

scoped属性

scoped会给局部样式（非组件元素和组件根元素(不含组件内子元素)）添加上 "class=data-*** " 的类名。
在scoped中写样式，会在每句css选择器末尾中添加 data-*** 的类名，但如果是嵌套解构的css选择器会在最后一个样式中添加类名，从而导致a拿不到样式。

//.a为大div父组件 .b为子组件根元素 .c为子组件内的子元素
 .a .b .c{//多层
    color:red
  }
  //会渲染成
  .a .b .c[data-v-2311c06a]{
    color:red
  }

深度作用选择器

既想更改组件内样式，又想保持样式的局部作用域，不污染全局的情况下，就可以使用深度作用选择器。深度作用选择器可以更“深层”的影响组件中的样式。

当vue中的style使用的是css就可以使用 ">>>" ，但是预处理器无法使用该方法

<style lang="css" scoped>
    .a >>> .b{
        /*...*/
    }
</style>

/deep/ 放在需要添加样式的选择器前

<style lang="scss" scoped>
.a{
 /deep/ .b { 
  /* ... */ 
 }
} 
</style>

在vue-cli3中，/deep/使用可能会失效。此时我们可以用到::v-deep

<style lang="scss" scoped>
.a{
 /deep/ .b { 
  /* ... */ 
 }
} 
</style>

在CSS预处理器less, sass, scss下使用后两种，::v-deep的编译速度更快