scoped css通过为组件元素添加唯一data-v-xxxx属性并重写选择器实现样式隔离；需穿透时，vue 3推荐使用:deep()，vue 2/3兼容::v-deep，/deep/和>>>已废弃或受限。
scoped CSS 的核心作用是让样式只作用于当前组件，不“跑出去”影响其他部分。它靠给组件内每个元素自动加一个 data-v-xxxx 属性，再把你的 CSS 选择器改成带这个属性的形式来实现隔离。但这也带来一个问题：你想改子组件或第三方组件（比如 Element Plus 的按钮）内部的样式时，常规写法根本不起作用——因为那些内部元素没有你的 data-v-xxxx。
scoped 是怎么工作的
它不是魔法，就是编译时做两件事：
- 给模板里所有元素加上同一个唯一属性，比如
data-v-1a2b3c - 把
.btn { color: blue }编译成.btn[data-v-1a2b3c] { color: blue }
这样一来，样式就锁死在本组件范围内。父组件写 .btn，不会影响子组件里的 .btn；两个同名组件也不会互相干扰。
为什么需要穿透？
当你用到第三方组件（如 <el-input></el-input>、<van-button></van-button>）或自定义子组件时，它们内部结构你无法直接改，且它们自身可能也用了 scoped。这时你在父组件里写：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
.my-form .el-input__inner { border: 2px solid red; }
是无效的——因为 .el-input__inner 所在的 DOM 没有你的 data-v-xxx 属性，选择器对不上。
三种穿透写法及适用场景
它们目标一致：绕过属性选择器限制，让样式能“钻进去”。但写法和兼容性不同：
-
::v-deep()（推荐）：Vue 2.6+ 和 Vue 3 都支持，预处理器（SCSS/Sass/Less）下稳定可用。写法是：.parent::v-deep(.child) { color: red; }或更清晰的.parent :deep(.child) { color: red; } -
/deep/：Vue 2 时代常用，但在 Vue 3 中已被废弃，新项目别用。 -
>>>：仅适用于原生 CSS（没用预处理器），在 SCSS 等中会报错，已不推荐。
更稳妥的替代思路
穿透不是万能解，有时反而增加维护成本。可考虑：
- 优先使用组件库提供的
class-name、prefix-icon等 prop 来定制外观 - 用全局样式（不加 scoped）覆盖，但要加足够强的选择器，避免污染，例如：
body .my-page .el-button--primary - 在子组件内部暴露
style或css vars，由父组件传入变量控制，更可控也更符合封装原则
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
