深度(穿透)选择器 ::v-deep/deep/及 ＞ ＞ ＞

原文：深度（穿透）选择器 ::v-deep /deep/ 及 ＞＞＞_俺是老王的博客-CSDN博客_v-deep

在vue项目的开发过程,使用了ElementUI组件样式style使用了scope属性,当想要修改组件样式,发现直接修改不了,需去掉scope属性或者使用深度选择器才能去修改成功。去掉scope又会影响全局样式,针对这种情况,可以使用深度作用选择器(即样式穿透)。本文对深度选择器做一个记录。

1.当项目中使用的css原生样式,需要使用>>>深度选择器来修改,外用第三方组件的样式

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

2.当项目中使用的css扩展语言是less,需要使用/deep/或者::v-deep深度选择器来修改 外用第三方组件的样式。

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

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

3.当项目中使用的css扩展语言是node-sass,需要使用/deep/或者::v-deep 深度选择器来修改 外用第三方组件的样式。

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

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

4、当项目中使用的 css 扩展语言是 dart-sass， 需要使用 ::v-deep 深度选择器来修改 外用第三方组件的样式，dart-sass不支持 /deep/ 和 >>> 的写法。

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

总结：

② vue3.0 中使用 /deep/ 会报错，更推荐使用 ::v-deep
③ 对于使用了 css 预处理器（scss 、sass、 less）时，深度选择器 ::v-deep 比较通用