(VUE) CSS中 :deep 是什么意思？

## `::v-deep` 或 `:deep()` 在 CSS 中的含义

在 CSS 中，`::v-deep`（或其函数形式 `:deep()`) 是 Vue.js 特有的一个**深度选择器**。

它的主要作用是**穿透组件的样式封装（scoped CSS）**。

## 为什么需要深度选择器？

在 Vue.js 单文件组件（SFC）中，当你给 `<style>` 标签添加 `scoped` 属性时，Vue 会自动为组件的每个元素添加一个唯一的属性选择器（例如 `data-v-xxxxxx`）。这样做的目的是将组件的样式限制在组件内部，避免样式污染到其他组件，实现组件的样式隔离。

然而，这种样式隔离在某些情况下会带来不便。例如：

1. **修改第三方组件的样式：** 如果你在一个 Vue 组件中使用了第三方 UI 组件库（如 Element UI、Ant Design Vue 等），这些组件通常会有自己的内部结构和样式。由于你的组件样式是 `scoped` 的，你无法直接通过普通的 CSS 选择器修改第三方组件内部元素的样式。
2. **修改子组件内部元素的样式：** 有时候你需要在父组件中对子组件的某个特定元素进行样式调整，但子组件本身也是 `scoped` 的。

在这种情况下，就需要深度选择器来“穿透”这种样式封装。

<!-- more -->

## `::v-deep` 和 `:deep()` 的用法

**`::v-deep` (旧语法)**

这是 Vue 2.x 中常用的语法，但现在已经被弃用，不推荐在新项目中使用。

```html
<style scoped>
.parent-class ::v-deep .child-class {
  color: red;
}
</style>
```

**`:deep()` (推荐语法)**

这是 Vue 3.x 及更高版本推荐的语法，也是更符合 CSS 规范的函数式写法。

```html
<style scoped>
.parent-class :deep(.child-class) {
  color: red;
}
</style>
```

**工作原理：**

当你使用 `:deep()` 时，它会告诉 Vue 编译器：`child-class` 这个选择器应该被解析为全局的，不受 `scoped` 属性的限制。Vue 会将你的深度选择器转换为不带 `data-v-xxxxxx` 属性的普通选择器，从而能够匹配到被封装的元素。

**示例：**

假设你有一个父组件 `Parent.vue` 和一个子组件 `Child.vue`。

**Child.vue:**

```html
<template>
  <div class="child-container">
    <p class="child-text">我是子组件的文本</p>
  </div>
</template>

<style scoped>
.child-container {
  border: 1px solid blue;
  padding: 10px;
}
.child-text {
  color: blue;
}
</style>
```

**Parent.vue:**

```html
<template>
  <div class="parent-container">
    <ChildComponent />
  </div>
</template>

<script setup>
import ChildComponent from './Child.vue';
</script>

<style scoped>
.parent-container {
  margin-top: 20px;
}

/* 尝试修改子组件的文本颜色 */
.parent-container :deep(.child-text) {
  color: green; /* 这会生效 */
  font-weight: bold;
}

/* 如果不使用 :deep() 则不会生效 */
/* .parent-container .child-text {
  color: purple;
} */
</style>
```

在这个例子中，`Parent.vue` 使用 `:deep(.child-text)` 成功地将 `ChildComponent` 内部的 `.child-text` 元素的颜色改为了绿色并加粗，即使 `Child.vue` 的样式是 `scoped` 的。

## 替代方案和注意事项

虽然 `::v-deep` 或 `:deep()` 很有用，但过度使用它们可能会导致样式难以维护，因为它打破了组件的封装性。在某些情况下，可以考虑以下替代方案：

- **使用 CSS 变量：** 在子组件中定义 CSS 变量，父组件通过 prop 传递变量值来修改样式。
- **提供 prop 或 slot：** 如果是自定义子组件，可以为子组件提供 prop 或 slot 来控制其内部样式或内容。
- **不使用 `scoped` 样式：** 对于某些全局的或需要被其他组件覆盖的样式，可以考虑不使用 `scoped`，而是将其定义为全局样式。

## 总结

`::v-deep` 和 `:deep()` 是 Vue.js 中用于**穿透 `scoped` 样式封装**的深度选择器。它们允许你从父组件修改子组件或第三方组件的内部样式。在使用时，推荐使用 `:deep()` 语法，并注意权衡其带来的便利性和样式维护的复杂性。