CSS样式穿透方法

CSS样式穿透通常在使用组件库或第三方组件时遇到，由于组件库封装了组件的样式，难以直接修改组件内部的样式。以下是一些常见的CSS样式穿透方法：

1.使用

/deep/

或

>>>

选择器（已过时）：

/deep/

是一种过时的样式穿透选择器，而

>>>

是它的现代替代方案。在使用它们时，可以通过选择器深入到组件的子组件中，并覆盖它们的样式。

/* 使用 >>> 选择器进行样式穿透 */
.parent-component >>> .child-component {
  /* 修改子组件的样式 */
}

/* 或者使用 /deep/ 进行样式穿透（已过时） */
.parent-component /deep/ .child-component {
  /* 修改子组件的样式 */
}

2.使用

::v-deep

伪选择器（Vue 2.6.0+）：为了替代过时的

/deep/

选择器，Vue引入了

::v-deep

伪选择器，其作用与

>>>

相同。

/* 使用 ::v-deep 选择器进行样式穿透 */
.parent-component ::v-deep .child-component {
  /* 修改子组件的样式 */
}

3.使用

/deep/

或

::v-deep

时的注意事项：由于

/deep/

和

::v-deep

都是Vue特定的选择器，如果项目使用了CSS预处理器（如Sass、Less等），需要在选择器前面加上

/deep/

或

::v-deep

的转义符号，以防止预处理器对其进行处理：

/* 在Sass中使用 /deep/ 的转义 */
.parent-component {
  /deep/ .child-component {
    /* 修改子组件的样式 */
  }
}

/* 在Less中使用 ::v-deep 的转义 */
.parent-component {
  ::v-deep .child-component {
    /* 修改子组件的样式 */
  }
}