参考文献
深度选择器
深度选择器deep使用说明
在 Vue 中，为了实现组件内部样式对组件外部元素的穿透覆盖，可以使用 CSS 的 deep 选择器（也称为 >>> 或 /deep/）或 v-deep 指令。然而，这两个方法在 Vue 3 中已经被废弃，推荐使用 ::v-deep 伪类选择器。
示例
<template><div class="my-component"><!-- ... --></div>
</template><style scoped lang="less">
.my-component {/deep/ .target-class { // 或者使用 &:deep(.target-class)color: red;}
}
</style>
/deep/ 或 &:deep() 选择器可以穿透组件的 scoped 属性，使得内部样式可以作用于组件外部的 .target-class 元素。这里的 & 符号代表当前的选择器，&:deep() 将 & 与 .target-class 结合，创建了一个穿透性的嵌套选择器。
::v-deep 与/deep/ 的区别
::v-deep 和 :deep() 在 Vue 2.x 和 Vue 3.x 中都是用来穿透组件的 scoped 样式隔离，允许组件内的样式影响到组件外部的元素。它们实际上是同一种概念的不同表示形式。以下是它们的区别和历史背景：
-
Vue 2.x:
在Vue 2.x中，Vue提供了两种语法来穿透scoped样式：
/deep/: 这是一个CSS伪类选择器，用于Vue 2.x中的单文件组件 (SFC) 中，它允许组件内部的样式穿透到外部元素。
>>>: 这是另一种写法，功能与/deep/相同，它也是Vue 2.x中的一个语法糖，用于CSS预处理器中，比如 Sass 或者 Less。 -
Vue 3.x:
Vue 3.x移除了/deep/和>>>选择器，因为它们在某些CSS预处理器中存在解析问题，并且不是标准的CSS语法。
::v-deep被引入作为Vue 3.x的替代方案，这是一个伪元素选择器，它解决了预处理器中的解析问题，并且更加符合 CSS 标准。
在Vue 3.x中，::v-deep仅限于在SFC的<style>标签内使用，它与Vue 2.x中的/deep/和>>>表达相同的功能。
多级深度使用示例
.parent :deep(.child-class) {}
)
)
)