css样式穿透

1. >>>

>>>是CSS原生中的深度选择器语法，用于穿透样式封装

• 兼容性

• • 仅在某些特定环境（如Webpack的css-loader配置中）和原生CSS中有效，Vue单文件组件中通常需要特定配置才能使用

• 在Vue单文件组件中，我们通常会搭配css预处理器使用。但Sass之类的预处理器无法正确解析>>>，所以不推荐使用>>>，可以使用/deep/或::v-deep操作符取而代之，两者都是>>>的别名，同样可以正常工作。

<style scoped>
.parent >>> .child {
  /* 样式规则 */
}
</style>

2. /deep/

/deep/曾经是CSS中实际提出的新增功能，但之后被删除，所以不建议使用。

• 兼容性

• • 支持CSS预处理器（如Sass、Less）和CSS原生样式。

• 在Vue3中，/deep/不再被官方直接支持，虽然一些构建工具或库可能仍然兼容，但不推荐使用，使用后编译时控制台会输出警告信息。

<style scoped>
.parent /deep/ .child {
  /* 样式规则 */
}
</style>

3. ::v-deep

::v-deep是/deep/的别名深度选择器。

• 兼容性

• • 支持Vue2，但在Vue3中不推荐使用。

• 在Vue3中，::v-deep也不再被官方直接支持，虽然一些构建工具或库可能仍然兼容，但不推荐使用，使用后编译时控制台会输出警告信息。

<style scoped>
.parent::v-deep .child {
  /* 样式规则 */
}
</style>

4. ::v-deep()

::v-deep()是深度选择器从Vue2向Vue3演化过程中的一个过渡性组合器。

• 用法

• • 支持Vue3，但在编译时被视为已弃用并会引发警告。

<style scoped>
.parent ::v-deep(.child) {
  /* 样式规则 */
}
</style>

:5. deep()

:deep()是Vue3官方推荐的深度选择器，不建议使用>>>和/deep/以及::v-deep包括::v-deep()。

• 支持Vue3，但在Vue2中不可使用。

<style scoped>
.parent :deep(.child) {
  /* 样式规则 */
}
</style>

结论

1. 在Vue2中使用::v-deep;
2. 在Vue3中使用:deep();
3. /deep/需要与特定浏览器版本搭配使用，不推荐使用
4. 部分CSS预处理器对>>>支持不佳，在不使用CSS预处理器时可使用，否则不推荐使用