:deep
名称：CSS作用域穿透选择器
核心作用
- 穿透样式隔离 允许父组件样式影响子组件的深层元素，解决组件化开发中样式被隔离的问题。
- 覆盖第三方组件样式 当使用 UI 库（如 Element UI、Ant Design）时，直接修改子组件内部元素的样式。
vue3语法 新版语法 ::v-deep 或 :deep
:deep称为CSS作用域穿透选择器，在vue中，默认有样式作用域隔离（通过
<style scoped>）。若需要覆盖子组件样式，需用::v-deep（Vue 3 推荐，取代废弃的/deep/和>>>）。
css
/* Vue 3 语法 */
::v-deep(.child-class) {
color: red;
}
/* 简写（某些预处理器如 SASS 可能需要括号） */
:deep(.child-class) {
color: red;
}vue2语法 旧版语法 /deep/ 或 >>>
css
/* Vue 2 或旧版语法 */
.parent-class /deep/ .child-class {
color: red;
}
/* 或 */
.parent-class >>> .child-class {
color: red;
}注意事项
- 谨慎使用 过度使用会破坏组件独立性，应优先通过组件接口（如 Props）或 CSS 变量（
--custom-color）修改样式。 - 替代方案 现代框架推荐通过 CSS 变量或
:global（如 CSS Modules）实现样式共享。 - 废弃语法
/deep/、>>>、Vue 3 推荐::v-deep。