vue3 css deep函数

在 Vue.js 3 中，可以使用 `::v-deep` 或 `/deep/` 来模拟 CSS 的深度选择器。

例如，假设我们有一个如下的嵌套组件结构：

<template>
  <div class="parent">
    <span class="child">Hello world!</span>
  </div>
</template>

在父组件中，我们可以使用 `::v-deep` 或 `/deep/` 来选择子组件的样式：

<template>
  <div class="parent">
    <span class="child::v-deep">color: red;</span>
    <!-- 或者使用 /deep/ -->
    <span class="child/deep/">color: red;</span>
    <ChildComponent />
  </div>
</template>

这样就可以选择子组件中的 `.child` 样式并设置它的颜色为红色。

需要注意的是，由于 `/deep/` 和 `::v-deep` 都是 Vue.js 特有的选择器，因此可能无法在某些 CSS 预处理器中使用。此外，这些选择器也可能会影响性能，因此应该谨慎使用。