🎯 解釋

在 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;
}