一文搞懂 ＞＞＞、/deep/、::v-deep、::v-deep()和:deep() 的区别与用法

>>>  兼容性差  但Sass之类的预处理器无法正确解析>>>

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

/deep/  css提出的新功能，之后被删除，不推荐

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

::v-deep 支持vue2 ，vue3中兼容性差，会出现警告，只推荐在vue2中使用。

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

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

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

:deep() 是vue3 推荐的

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