样式穿透

在Vue项目中，尤其是在使用组件化开发时，我们某些时候需要对组件内部的某些样式优化，但Vue的样式封装特性（scoped）会阻止外部样式直接作用于组件内部。为了应对这一挑战，Vue社区引入了深度选择器，让我们能够跨越组件的封装边界，对内部元素进行样式定制

深度选择器允许我们从父组件中穿透到子组件内部，直接修改子组件的样式。这在需要定制第三方UI库组件样式时尤为有用

vue2中使用

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

vue3中使用

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

摘录于：【大前端】搞懂＞＞＞、/deep/、::v-deep、::v-deep()和:deep()的区别与用法在Vue项目中，尤 - 掘金