Vue 3 中::v-deep已废弃，应使用:deep()伪类且仅在<style scoped>内有效；需配合外层作用域选择器，针对第三方组件真实类名使用，避免嵌套或多层穿透。
为什么::v-deep写法不生效？
Vue 3 默认使用 shadow-dom 风格的样式隔离（即 scoped），子组件的根元素会被自动加上类似 data-v-f3f3eg9 的属性，但第三方组件（比如 el-button、van-button）内部结构不受你项目的 scoped 影响，你的 CSS 规则根本匹配不到它的内部节点。
很多人直接写 ::v-deep .my-class 发现无效，是因为：::v-deep 是 Vue 2 的写法，Vue 3 中已被废弃；当前有效的是 :deep()（函数式伪类），且必须出现在 <style scoped> 内部。
-
::v-deep、/deep/、>>>在 Vue 3 + Vite 或 Vue CLI 5+ 中默认被忽略或报 warning -
:deep()只在<style scoped>下起作用，单独写在非 scoped 样式里没意义 - 不能嵌套多层
:deep(:deep(.x))，只支持一层穿透
:deep() 的正确写法和常见错误
核心原则：把要修改的第三方组件选择器，作为 :deep() 的参数，且必须是它内部真实存在的类名或标签名。不是随便写个名字就能穿透进去。
例如想改 Element Plus 的按钮文字颜色：
立即学习“前端免费学习笔记（深入）”；
<style scoped>
.my-btn :deep(.el-button__inner) {
color: #ff6b6b;
}
</style>
注意点：
- 必须有外层选择器（如
.my-btn）作为作用域锚点，否则:deep(.el-button__inner)会全局生效，违背 scoped 初衷 -
:deep()里只能写简单选择器（类名、标签名、属性选择器），不支持复合选择器如.el-button .el-button__inner - 如果第三方组件用了动态类名（如某些 UI 库用
v-bind:class拼接），得 inspect 元素确认最终渲染出的真实类名 - 遇到内联样式（
style="color: red"）优先级更高，:deep()无法覆盖，需加!important（不推荐，应优先查是否样式被 JS 覆盖）
当 :deep() 还是不起作用？试试这些替代路径
有些组件（尤其是基于 Web Components 或 Shadow Root 渲染的）根本不允许外部样式穿透，比如部分 video 控件、custom element 或某些封装极深的 UI 组件。这时需要换策略：
- 用
<style>（非 scoped）写全局规则，配合高特异性选择器，如.my-page :is(.van-button) .van-button__text - 在组件
mounted钩子中用document.querySelector找到目标节点，直接操作style属性（仅限临时 hack，不推荐长期维护） - 检查第三方组件是否提供
class-prefix、custom-class等 prop，把自定义类名透传进去，再用普通 scoped 样式控制 - Vite 项目可配置
css.preprocessorOptions.scss.additionalData注入全局变量，统一管理主题色，比硬写:deep()更可持续
深度修改样式时最容易被忽略的兼容性细节
不同构建工具对 :deep() 的解析行为略有差异。Vite 默认用 vue/compiler-sfc 处理，而 Vue CLI 5+ 需确保 @vue/compiler-sfc 版本 ≥ 3.2.0；低版本可能仍识别 ::v-deep，但行为不稳定。
另外要注意：
- SSR 场景下，
:deep()生成的属性选择器在服务端渲染时可能不一致，导致首屏样式错乱 - 如果第三方组件用了
emits+slots动态生成结构（如<slot name="icon"></slot>），其 DOM 位置可能不在你预期的层级，:deep()选中后也未必能命中 - 某些 UI 库（如 Ant Design Vue）明确建议用
ConfigProvider全局配置主题，而非手动覆盖样式 —— 直接改 CSS 容易在升级后失效
真正可靠的深度定制，往往不是靠一层 :deep() 解决的，而是结合组件提供的 API、主题配置机制、以及必要时 fork 源码做轻量适配。盲目穿透容易让样式逻辑散落在各处，后期难维护。
