Style in Vue uses several ways of scoped depth access (style penetration)

1. > > >

If the lang for style in a Vue project is CSS, then:

<style lang="css" scoped>
.a >>> .b { 
   / / CSS styles
}
</style>
Copy the code

But sometimes >>> this notation is not recognized by SCSS or LESS preprocessors.

2. /deep/

If the style lang in the Vue project is less, then:

<style lang="less" scoped>
.a{
   /deep/ .b { 
      / / CSS styles
   }
} 
</style>
Copy the code

3. ::v-deep

If the Vue project style lang is SCSS, then:

<style lang="scss" scoped>
.a{
   ::v-deep .b { 
      / / CSS styles
   }
} 
</style>
Copy the code

These are just a few of the ways I know of to use deep access (style penetration) in different preprocessing languages. If you know of any other methods, I’d like to post them in the comments section for you to learn. Thanks.