El rol del selector de roles de profundidad css:
Si no puede modificar el estilo de los componentes de la biblioteca de componentes de la interfaz de usuario de terceros después de usar scoped ,
puede usar el selector de profundidad de CSS aquí para modificar el estilo.
Ejemplo: en un proyecto vue, las bibliotecas de componentes como elementUI , vant, iview, etc. se usan a menudo, y algunos archivos de estilo se pueden personalizar, pero algunos estilos no son válidos cuando se modifican directamente en el componente, porque el ámbito está limitado al actual. y la eliminación del ámbito afectará al estilo global. Para este caso, se pueden utilizar selectores de acción profunda (es decir, penetración de estilo).
1. Si el proyecto usa el estilo css nativo, puede usar directamente >>> modificación de penetración
<style scoped>Al escribir algunos proyectos de Vue, a menudo se introducen algunos componentes de la interfaz de usuario. Ya sea un componente personalizado o un componente externo introducido. Hay un atributo de ámbito en la etiqueta de estilo. Evita que los estilos afecten a otras páginas. Pero es necesario cambiar el estilo del componente self en el componente principal. Es necesario usar penetración de componentes (también llamada modificación profunda de css)
1：>>>
>>> Permite que los selectores trabajen "más profundamente" y afecten los subcomponentes internos
Si el proyecto usa el estilo css nativo, entonces puede usar directamente >>> para penetrar la modificación.
<style scoped>
/*编译前*/
.a >>> .b {
/* ... */
}
/*编译后*/
.a[data-v-f3f3eg9] .b { /* ... */ }
</style>
2： /profundo/
Los operadores scss, sass y less del preprocesador >>> se pueden usar en el proyecto y se puede informar un error porque no se puede compilar. Puede usar /deep/ para penetrar, pero vue-cli3 puede causar errores de mutación. Esta vez usa ::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-profundo
::v-deep es más común en los preprocesadores scss, sass, less
::v-deep se puede usar si se usa el preprocesador. ::v-deep y /deep/ son selectores profundos, que pueden modificar el estilo dentro del componente. ::v-deep graba más rápido. Usar /deep/ en scss informará un error del cargador. Puede usar ::v- profundo en su lugar
<style lang="scss" scoped>
/*用法1*/
.a{
::v-deep .b { color:red; }
}
/*用法2*/
.a ::v-deep .b { color:red;}
</style>material: