Vue3 里 CSS 深度作用选择器 :deep()

🎯 解释

在 Vue 组件里，CSS 默认是 scoped（作用域限定的），只对当前组件生效。
如果你想在 scoped 样式里，穿透到子组件的内部元素，就要用 :deep()。

---

✏️ 示例

比如，你有一个子组件 Child.vue，里面有：

<template>
  <div class="test">子组件里的元素</div>
</template>

然后你在父组件的 <style scoped> 里想去修改 Child.vue 里的 .test 样式，正常是选不到的，
这时候就用 :deep()：

<style scoped>
:deep(.test) {
  color: red;
  font-size: 20px;
}
</style>

这样就可以突破 scoped 限制，直接修改 .test 这个类了！

---

💡 总结一下

语法	意思
:deep()	让你在 scoped 样式中穿透作用域，选到子组件或内部元素

---

⚡ 补充一点

• :deep() 里面可以是普通选择器，比如 .class、#id、tag 等。
• 也可以嵌套写，比如：

  .parent :deep(.child) {
    color: blue;
  }
  

---

扩展

✨ 1. >>> 这种（早期写法）

<style scoped>
.parent >>> .child {
  color: red;
}
</style>

• >>> 是深度穿透符，意思是：从 .parent 穿透作用域，到 .child。
• 这种写法主要是 Vue2 时代流行的，Vue3 的部分构建工具还兼容。

---

✨ 2. ::v-deep（官方推荐的新写法）

<style scoped>
.parent ::v-deep(.child) {
  color: blue;
}
</style>

• ::v-deep 是 Vue3 官方推荐的指令式深度选择器。
• 更规范，兼容性好，以后也更不会被废弃。

---

🎯 小对比表

写法	备注
:deep(.child)	单独用，穿透到某个 class
.parent >>> .child	旧版写法，少数工具链还支持
.parent ::v-deep(.child)	新版推荐写法，更标准更持久

---

⚡ 小Tips

• 如果你项目用的是 vite、vue-cli 这些现代工具，推荐用 ::v-deep。
• >>> 这种可能将来会在某些构建工具中不支持。

---

🎨 一个小例子

比如父组件：

<template>
  <div class="parent">
    <Child />
  </div>
</template>

子组件：

<template>
  <div class="child">Hello</div>
</template>

想让 .child 变色，父组件 <style scoped> 可以写：

.parent ::v-deep(.child) {
  color: orange;
}