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

解释

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

---

✏️ 示例

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

然后你在父组件的

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

---

总结一下

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

---

⚡ 补充一点

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

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

---

扩展

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

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

---

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

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

---

小对比表

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

---

⚡ 小Tips

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

---

一个小例子

比如父组件：

子组件：

想让 .child 变色，父组件