Vue的scoped样式默认不穿透子组件，因编译时添加唯一data-v属性且仅作用于本组件；::v-deep或:deep()是官方推荐的可控穿透方式，但需注意权重、teleport、动态挂载等限制。
不能直接用 scoped 影响子组件内部样式，这是设计使然 —— Vue 的 scoped 机制默认就**不穿透**到子组件内部节点。
为什么父组件的 scoped 样式不生效于子组件内部？
Vue 编译时会给父组件所有 DOM 元素加一个唯一属性（如 data-v-7ba5bd90），同时把 CSS 选择器重写为带该属性的形式，比如 .btn → .btn[data-v-7ba5bd90]。子组件内部的元素（非根节点）只带自己的 data-v-xxx，不带父组件的，所以父组件的选择器根本匹配不上。
唯一例外是：子组件的**根元素**会同时拥有父、子两个 data-v- 属性，因此父组件的简单选择器（如 .child）可能意外命中它 —— 但这不是可控的穿透，而是边界行为，别依赖它。
::v-deep 是唯一推荐的穿透方式
::v-deep 是 Vue 3 官方保留的深度选择器，用于显式突破作用域限制。它必须配合 scoped 使用，且只在 <style scoped></style> 块内有效。
立即学习“前端免费学习笔记（深入）”；
- 语法必须写成
::v-deep .target-class，中间有空格；写成::v-deep.target-class（无空格）无效 - 它会被 PostCSS 转换为
[data-v-xxx] .target-class，从而匹配子组件中带对应类名的任意后代节点 - 不支持链式伪类（如
::v-deep .item:hover::before可能失效），建议拆解或改用:deep()（见下条）
示例：
<style scoped>
.parent-component {
background: #f5f5f5;
}
/* 正确：影响子组件里所有 .el-input__inner */
::v-deep .el-input__inner {
border-radius: 4px;
}
</style>:deep() 替代 ::v-deep（Vue 3.2+ 推荐）
Vue 3.2 起引入了更语义化的 :deep() 函数式伪类，功能等价但更清晰，且支持嵌套写法。
-
:deep(.target)等同于旧版::v-deep .target - 可嵌套使用，比如
:deep(.form) :deep(.input)或:deep(.form .input) - 搭配
:global()和:slotted()可组合出更精确的作用域控制
注意：:deep() 必须出现在 <style scoped></style> 内，且不能单独写成 .parent :deep .child —— :deep() 后必须紧跟选择器，括号不可省略。
容易踩的坑：第三方组件样式覆盖失败
覆盖 Element Plus、Ant Design Vue 这类 UI 库组件时，常见问题不是语法错，而是选择器权重或时机不对：
- UI 组件内部用了
!important，你的:deep()规则也要加才能赢过它 - 某些组件（如
el-select下拉框）是动态挂载到body的，不在父组件 DOM 树内，:deep()失效 —— 得改用全局样式或:global() - 如果子组件用了
teleport，它的 DOM 节点脱离了当前组件树，:deep()同样无法触达 - Vite + Vue 3 项目中，若启用了
css.devSourcemap，有时热更新后样式未刷新，需手动 F5
真正难的从来不是写对 :deep()，而是判断该样式是否真的属于“可穿透”范围 —— 动态插入、teleport、shadow DOM、CSS-in-JS 都会让它失效。
