如何在Vue 3中使用Scoped CSS作用域样式_分析v-deep深度选择器的应用场景-css教程-PHP中文网

::v-deep在vue 3.4+中已废弃并失效，官方推荐改用:deep()；后者仅对前置选择器后的后代元素生效，不可单独使用或穿透子组件根节点，且需避免过度依赖导致样式耦合。

如何在vue 3中使用scoped css作用域样式_分析v-deep深度选择器的应用场景

Vue 3中`::v-deep`已被废弃，该用`:deep()`

直接说结论：::v-deep在 Vue 3.4+（尤其是 Vite 5 + Vue 3.4 默认配置）中已完全失效，编译时会报 warning，运行时样式不生效。官方明确推荐改用:deep()伪类函数语法。

原因在于::v-deep是 Vue 2 时代沿用的非标准伪元素写法，依赖 PostCSS 插件（如vue-loader或@vue/compiler-sfc的旧版转换逻辑），而 Vue 3.4 起转向更符合 CSS WG 规范的:deep()、:slotted()、:global()三元体系。

常见错误现象：

写了::v-deep(.el-input__inner) { border: 1px solid red; }，但 input 框边框毫无反应
Vite 控制台出现警告：::v-deep usage is deprecated. Use :deep() instead.
使用 Sass/SCSS 时，::v-deep嵌套写法（如&::v-deep .icon）直接编译失败

`:deep()`的正确写法与作用范围限制

:deep()不是万能穿透器——它只对当前选择器**之后的后代选择器**生效，且不能用于顶层选择器本身。

正确示例：

<style scoped>
.my-form :deep(.el-input__inner) {
  padding: 8px 12px;
}
</style>

这个规则等效于编译后生成：.my-form[data-v-xxxx] .el-input__inner（注意：中间是空格，不是属性匹配）。

容易踩的坑：

Auth0 Vue

在 Vue.js 3 中添加身份验证（登录、注销、用户会话、受保护路由），集成 @auth0/auth0-vue SDK，配合 Vite 使用。

下载

:deep()必须紧跟在一个已有选择器后面，不能单独写:deep(.xxx) {...}（会失效）
不能穿透到<slot></slot>内容以外的父级上下文（比如子组件里用了scoped，你父组件用:deep()也改不了它的根元素自身属性）
如果目标元素是子组件的根节点（如<el-button></el-button>渲染出的最外层<button></button>），:deep()无效，得用:global()或透传class
在<style lang="scss"></style>中，不要写成&:deep(...)，应写为& :deep(...)（注意空格）

什么时候不该用`:deep()`？替代方案更稳妥

过度依赖:deep()会让样式耦合变强，一旦第三方组件内部结构微调（比如 Element Plus 把.el-input__inner改成.el-input-inner），你的样式就全挂了。

优先考虑这些方式：

查文档看组件是否支持class透传：比如<el-input :class="'custom-input'"></el-input>，然后在<style scoped></style>里写.custom-input .el-input__inner
用:global()处理真正全局需要覆盖的场景（如主题色统一替换），但要加足够特异的选择器前缀，避免污染其他组件
向子组件提 PR 或封装一层 wrapper 组件，在其根元素上暴露extra-class prop，把样式控制权交还给子组件自身
对简单样式（如背景、文字颜色），尝试用 CSS 自定义属性（--el-color-primary）配合:root覆盖，比:deep()更稳定