Several ways of using scoped depth access (style penetration) in style in Vue
1. >>>
If the lang of the style in the Vue project is css , then:
<style lang="css" scoped>
.a >>> .b {
// css 样式
}
</style>
But sometimes >>>this way of writing is not recognized by the scss or less preprocessor.
2. /deep/
If the lang of the style in the Vue project is less , then:
<style lang="less" scoped>
.a{
/deep/ .b {
// css 样式
}
}
</style>
3. ::v-deep
If the lang of the style in the Vue project is scss , then:
<style lang="scss" scoped>
.a{
::v-deep .b {
// css 样式
}
}
</style>
These are the methods I know so far that can use the deep access (style penetration) function in different preprocessing languages. If you know other methods, I hope you can write them in the comment area for everyone to learn together, thank you.