Le style ne fonctionne pas ? Essayez le sélecteur d'effet de profondeur CSS : >>> , /deep/ , ::v-deep style pénétration utilisation et différences

Le rôle du sélecteur de rôle de profondeur CSS :

Si vous ne pouvez pas modifier le style des composants de la bibliothèque de composants d'interface utilisateur tiers après avoir utilisé scoped ,
vous pouvez utiliser le sélecteur de profondeur CSS ici pour modifier le style.

Exemple : dans un projet vue, des bibliothèques de composants telles que elementUI , vant, iview, etc. sont souvent utilisées, et certains fichiers de style peuvent être personnalisés, mais certains styles ne sont pas valides lorsqu'ils sont modifiés directement dans le composant, car la portée est limitée au courant composant, et la suppression de la portée affectera le style global. Dans ce cas, des sélecteurs à action profonde (c'est-à-dire pénétration de style) peuvent être utilisés.

Utilisation spécifique

1. Si le projet utilise le style css natif, vous pouvez directement utiliser >>> la modification de la pénétration

<style scoped>

Lors de l'écriture de certains projets Vue, certains composants d'interface utilisateur sont souvent introduits. Qu'il s'agisse d'un composant personnalisé ou d'un composant externe introduit. Il y a un attribut scoped sur la balise de style. Empêche les styles d'affecter d'autres pages. Mais il est nécessaire de changer le style du composant self dans le composant parent. Il est nécessaire d'utiliser la pénétration de composant (appelée aussi modification profonde de css)

1：>>> 

>>> Permet aux sélecteurs de travailler "plus en profondeur" et d'affecter les sous-composants internes

Si le projet utilise le style css natif, vous pouvez directement utiliser >>> pour pénétrer la modification.

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

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

2： /profond/

Les opérateurs scss, sass et less du préprocesseur >>> peuvent être utilisés dans le projet, et une erreur peut être signalée car il ne peut pas être compilé. Vous pouvez utiliser /deep/ pour pénétrer, mais vue-cli3 peut provoquer des erreurs de mutation. Cette fois, utilisez ::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-profond

::v-deep est plus courant dans les préprocesseurs scss, sass, less

::v-deep peut être utilisé si le préprocesseur est utilisé. ::v-deep et /deep/ sont tous deux des sélecteurs profonds, qui peuvent modifier le style à l'intérieur du composant. ::v-deep enregistre plus rapidement. L'utilisation de /deep/ dans scss signalera une erreur de chargeur. Vous pouvez utiliser ::v- profond à la place

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

Matériel:

 CSS délimité | Chargeur Vue

Crochets angulaires de pénétration de style Vue 3, /deep/, ::v-deep considérations sur les scénarios d'application_June.1's blog-CSDN blog_/deep/ ::v-deep