Depth (penetration) selector:: v-deep/deep/ and > > >

original text ： depth （ through ） Selectors ::v-deep /deep/ And ＞＞＞_ I am Lao Wang's blog -CSDN Blog _v-deep

stay vue The development process of the project , Used ElementUI Component style style Used scope attribute , When you want to modify the component style , It is found that it cannot be modified directly , Need to be removed scope Attribute or use depth selector to modify successfully . Get rid of scope It will also affect the global style , In this case , You can use the depth action selector ( That is, style penetration ). This paper makes a record of the depth selector .

1. When used in the project css Native style , Need to use >>> Depth selector to modify , Style of external third-party components

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

2. When used in the project css The extension language is less, Need to use /deep/ perhaps ::v-deep Depth selector to modify Style of external third-party components .

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

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

3. When used in the project css The extension language is node-sass, Need to use /deep/ perhaps ::v-deep Depth selector to modify Style of external third-party components .

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

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

4、 When used in the project css The extension language is dart-sass, Need to use ::v-deep Depth selector to modify Style of external third-party components ,dart-sass I won't support it /deep/ and >>> Writing .

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

summary ：

② vue3.0 Use in /deep/ Will report a mistake , More recommended ::v-deep
③ For the css The preprocessor （scss 、sass、 less） when , depth Selectors ::v-deep More general