• v-deep 只能用在 <style scoped> 的 CSS 裡

它的目的就是打破 scoped 限制、影響到子元件的樣式。

• 可以"穿透" Element UI 組件的元件隔離層，直接修改裡面子組件的樣式。

• 指定特定的 class，可以避免全部 Element UI 的樣式修改。

• 方法1 : 在el-dialog外嵌套一层div

<div class="my-dialog">
    <el-dialog v-model="dialogVisibles"  v-if="dialogVisibles">
    </el-dialog>
</div>

<style scoped lang=less>
:deep(.my-dialog){
  background-color: transparent;
}

// 使用深度是选择器也生效了
:deep(.el-dialog){
  background-color: transparent;
}
<style >

• 按 F12 查看原始碼

• 修改 El Element 樣式

• 为什么需要 deep 选择器？

Vue 的样式通常是有作用域的（使用 scoped 属性时）。这意味着父组件的样式规则不会直接影响子组件的 DOM 结构。为了覆盖子组件内部的样式或针对内部特定元素应用样式，deep 选择器是一个重要工具。

简写形式（组合样式）：

:deep(.class-name) {
  /* 样式 */
}

• 在 Vue 中的区别

:v-deep

单冒号的 :deep 是 Vue 提供的伪类，用于穿透组件的样式作用域，应用于子组件的特定样式。

::v-deep

双冒号 ::v-deep 是 Vue 3 中推荐的伪元素形式，作用与 :deep 相同，但语法上更现代。

Vue 推荐的写法

Vue 3 更推荐使用 ::v-deep，但对于简写仍支持 :deep。例如：

::v-deep(.child-class) {
  color: red;
}