(vue3 deep) vue3 :deep()的使用教程 Vue 3 中：deep() 伪选择器使用方法全网首发(图文详解1)

在Vue 3中, :deep() 是一个非常有用的伪选择器，主要用于样式穿透。在Shadom DOM中，你不能直接改变组件内部的样式，:deep() 允许你可以选中shadow内部的元素并应用样式。

这是如何使用它的步骤：

<template>
    <div class="outer">
        <div class="inner">
            Your Content
        </div>
    </div>
</template>

<style scoped>
.outer :deep(.inner) {
    background-color: blue;
}
</style>

在给定的代码中：

我们有一个 .outer 类，里面有一个叫 .inner 的类。 .inner 是你想要在全局或者上层组件中修改样式的类。
你可以看到在 .outer 类与 .inner 类之间我们用到了 :deep()。这是有道理的，因为我们实际上是想要”深入”到 shadow DOM 的 .inner 类中去。
于是在 :deep() 后面的所有类都将会被适当的选中并修改样式。

注意，尽管在Vue 3中可以使用 ::v-deep，但 :deep() 更具有通用性，因为它在其他使用 shadow DOM 的框架比如Angular和React中同样有效。

小提醒：有时你可能需要对一连串的嵌套组件进行样式穿透，此时你应使用 /deep/，如：

<style scoped>
.outer :deep(.middle :deep(.inner)) {
    background-color: blue;
}
</style>

这样外层的 .outer 类就可以透过 .middle 类直达 .inner 类了。