修改 Element UI 預設的樣式

• 按 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;
}