Style doesn't work? Try the CSS depth effect selector: >>> , /deep/ , ::v-deep style penetration usage and differences

The role of the css depth role selector:

If you cannot modify the style of the third-party UI component library components after using scoped ,
you can use the CSS depth selector here to modify the style.

Example: In a vue project, component libraries such as elementUI , vant, iview, etc. are often used, and some style files may be customized, but some styles are invalid when modified directly in the component, because scoped is limited to the current component, and removing scoped will affect the Global style. For this case, deep-action selectors (i.e. style penetration) can be used.

Specific usage

1. If the project uses the css native style, you can directly use >>> penetration modification

<style scoped>

When writing some Vue projects, some UI components are often introduced. Whether it is a custom component or an external component introduced. There is a scoped attribute on the style tag. Prevents styles from affecting other pages. But it is necessary to change the style of the self component in the parent component. It is necessary to use component penetration (also called deep modification of css)

1：>>> 

>>> Enables selectors to work "deeper" and affect internal subcomponents

If the project uses the css native style, then you can directly use >>> to penetrate the modification.

<style scoped>
/*编译前*/
.a >>> .b { 
 /* ... */
}

/*编译后*/
.a[data-v-f3f3eg9] .b { /* ... */ }
</style>

2： /deep/

The preprocessor scss, sass, and less operators >>> may be used in the project, and an error may be reported because it cannot be compiled. You can use /deep/ to penetrate, but vue-cli3 may cause mutation errors. This time use ::v-deep

<style lang="scss" scoped>
/*用法1*/
.a {
 /deep/ .b { 
  /* ... */
 }
} 
/*用法2*/
.a /deep/ .b { 
  /* ... */
 }

  .button-box{
    /deep/ .el-button{
      padding: 13px 50px;
    }
  }
</style>

3： ::v-deep

::v-deep is more common in preprocessors scss, sass, less

::v-deep can be used if the preprocessor is used. ::v-deep and /deep/ are both deep selectors, which can modify the style inside the component. ::v-deep records faster. Using /deep/ in scss will report a loader error. You can use ::v-deep instead

<style lang="scss" scoped>
/*用法1*/
.a{
 ::v-deep .b { color:red; }
} 
/*用法2*/
.a ::v-deep .b { color:red;}
</style>

material:

 Scoped CSS | Vue Loader

Vue style penetration angle brackets 3, /deep/, ::v-deep application scenario considerations_June.1's blog-CSDN blog_/deep/ ::v-deep