CSS作用域穿透选择器

:deep

名称：CSS作用域穿透选择器

核心作用

1. 穿透样式隔离 允许父组件样式影响子组件的深层元素，解决组件化开发中样式被隔离的问题。
2. 覆盖第三方组件样式 当使用 UI 库（如 Element UI、Ant Design）时，直接修改子组件内部元素的样式。

vue3语法 新版语法 ::v-deep 或 :deep

:deep称为CSS作用域穿透选择器，在vue中，默认有样式作用域隔离（通过<style scoped>）。若需要覆盖子组件样式，需用 ::v-deep（Vue 3 推荐，取代废弃的 /deep/ 和 >>>）。

/* Vue 3 语法 */
::v-deep(.child-class) {
  color: red;
}

/* 简写（某些预处理器如 SASS 可能需要括号） */
:deep(.child-class) {
  color: red;
}

vue2语法 旧版语法 /deep/ 或 >>>

/* Vue 2 或旧版语法 */
.parent-class /deep/ .child-class {
  color: red;
}

/* 或 */
.parent-class >>> .child-class {
  color: red;
}

注意事项

1. 谨慎使用 过度使用会破坏组件独立性，应优先通过组件接口（如 Props）或 CSS 变量（--custom-color）修改样式。
2. 替代方案 现代框架推荐通过 CSS 变量或 :global（如 CSS Modules）实现样式共享。
3. 废弃语法 /deep/、>>>、Vue 3 推荐 ::v-deep。