vue样式穿透

我们做 Vue 项目在组件里写 css 的时候，经常会给 <style> 标签加上 scoped ，比如这样： <style lang="less" scoped> ，这样写出来的 css 就是局部的，不会影响其他组件。

另外，假设我们在自己的组件中引入了一个子组件，并且希望在我的组件中修改子组件中的样式，或者使用组件库（如 element ui，iview ），在覆盖组件库样式的时候，由于我们用了 scoped ，直接修改是不生效的。去掉 scoped 是可以的，不过没了局部 css 风险不可控，会影响全局样式。这时候就需要用到样式穿透（深度作用选择器）

1、 原生css ，需要使用 >>> 深度选择器来修改外用第三方组件的样式

<style lang="css" scoped>
    .el-button >>> span{
        color: '#f00'
    }
</style>

2、扩展语言是 less， 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式

<style lang="less" scoped>
    /deep/.el-button{
         span{
                color: '#f00'
         }
    }

    .el-button::v-deep{
         span{
                color: '#f00'
         }
    }
</style>

3、扩展语言是 node-sass， 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式

<style lang="scss" scoped>
    .el-button::v-deep{
         span{
                color: '#f00'
         }
    }

    /deep/.el-button{
         span{
                color: '#f00'
         }
    }
</style>

注意：

1. 操作符 >>> 可能会因为无法编译而报错，可以使用 /deep/
2. vue3.0 中使用 /deep/ 会报错，更推荐使用 ::v-deep
3. 对于使用了 css 预处理器（scss 、sass、 less）时，深度选择器 ::v-deep 比较通用