CSS中 ::deep 作用，使用场景，使用方法介绍

::deep 是 Vue 中 scoped 样式的一个穿透语法，它的核心作用是：强制让父组件的样式穿透子组件的根节点或内部元素，从而覆盖子组件或第三方 UI 库的样式。

作用

当给

使用场景

1. 修改第三方 UI 库：直接修改 Element Plus、Vant 等库的内部样式，这些样式通常不受 scoped 影响。
2. 修改子组件根节点：父组件需要调整子组件最外层容器的布局（如边距、宽度）。
3. 修改子组件内部深层元素：子组件内部结构复杂，需要穿透多层选择器进行样式覆写。

使用方法

在

1. 修改子组件根节点

/* 父组件 */
<style scoped>
/* 作用于子组件 MyComponent 的根元素 */
::deep(.child-component) {
  border: 1px solid red;
}
</style>

2. 修改子组件内部深层元素

<style scoped>
/* 作用于子组件内部的 .header 元素 */
::deep(.child-component .header) {
  background-color: blue;
}
</style>

3. 针对 UI 库动态类名

<style scoped>
/* 覆盖 Element Plus 的输入框样式 */
::deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #ff0000 inset;
}
</style>

注意：早期 Vue 2 中使用的 /deep/ 或 >>> 已被废弃，统一使用 ::deep。如果你在使用 scss 等预处理器，写法不变。

如果项目未使用 scoped，则不需要 ::deep，直接编写全局样式即可覆盖。