深度选择器 ＞＞＞ ::v-deep /deep/

当我们使用vant、element、uview等组件，且样式使用scoped属性时，我们想要修改组件的样式会发现修改不了，需要去掉scope属性，但是这时候会影响到全局的样式。这时候我们可以使用深度选择器。

 深度选择器的作用

深度选择器主要用于将全局的组件或者类的样子转化成局部的类从而达到在scoped内部添加样式后起作用的目的。

1.  >>>用在css原生样式中  来修改第三方组件库

<style lang='css' scope>
    .el-buttom >>> span{
        padding: 8px
    }

</style>

1. ::v-deep 或 /deep/ 用在css扩展语言less 、 node-sass中  来修改第三方组件库

<style lang="less" scope>
    /deep/.el-button {
        span {
            padding: 8px
        }
    }

    .el-button::v-deep {
        span {
            padding: 8px
        }
    }

</style>

 css扩展语言dart-sass 需要使用::v-deep深度选择器来修改，使用/deep/ 和>>>不支持

注意： 对于css预处理器，::v-deep比较通用