父组件加scoped后仍影响子组件，是因为子组件根元素会同时受父组件和自身scoped样式影响，且同名类名可能通过CSS层叠或继承产生意外作用；需用:deep()穿透修改子组件内部样式。
为什么加了 scoped 样式还是影响了子组件？
Vue 3 的 scoped 并不递归作用于子组件，它只对当前组件的模板节点打上属性选择器（如 data-v-f3f4f9a2），而子组件的根元素默认不会继承这个属性。所以你写 .btn { color: red; }，它只会匹配当前组件内带 data-v-f3f4f9a2 的 .btn，但不会穿透到子组件内部的 .btn。
常见错误现象：父组件用了 scoped 写了 input:focus，结果子组件里的 <input> 没反应——因为子组件的 input 没被加上 scope 属性。
- 若需影响子组件样式，用
:deep(.child-class)（推荐）或::v-deep(.child-class)（兼容写法） -
:deep()只作用于后代选择器，不能用于顶层选择器（比如:deep() .btn合法，:deep(.btn)不合法） - 避免滥用：
:deep()会绕过作用域隔离，可能造成意外覆盖
scoped 样式里怎么修改第三方组件的内部样式？
比如你用了 <el-button> 或 <van-button>，想调它的文字颜色或边框，直接写 .van-button 在 scoped 块里是无效的——它没被编译进当前组件的 scope 属性中。
正确做法是用深度选择器配合具体路径：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
<style scoped>
.my-form :deep(.van-button--primary) {
background-color: #1890ff;
}
</style>
- 必须有前缀选择器（如
.my-form），否则:deep()会被忽略（Vue 3.2+ 的限制） - 如果第三方组件使用了
emits+slots暴露了 class 控制权，优先用classprop 替代深度选择器 - 注意 SSR 场景下
:deep()仍生效，但服务端生成的 scope id 和客户端不一致时可能导致 FOUC，建议搭配ssr: false或静态 class 降级
使用 scoped 后 CSS 选择器变长、性能下降怎么办？
Vue 编译后会把每个选择器都追加一个唯一属性（如 .btn[data-v-f3f4f9a2]），嵌套多层后容易变成 .a .b .c[data-v-f3f4f9a2]，尤其在使用 Sass 的 & 嵌套时更明显。
- 避免无意义嵌套：不要写
.container { .header { h1 { ... } } }，直接用.container-header-title类名 - 慎用
:global()：它会完全退出 scoped 模式，仅在需要重置全局样式（如body、html）时使用 - 构建时可启用
css.devSourcemap = false减少 dev 模式下的选择器膨胀（不影响功能）
要不要给所有组件都加 scoped？
不是必须。局部样式隔离适合业务组件，但布局类、主题类、工具类组件反而更适合用 :global 或独立 CSS 文件。
- 原子组件（Button、Input）建议用
scoped+ 提供class/style插槽，便于外部定制 - 页面级组件（如
HomeView.vue）可不用scoped，改用 BEM 命名（home__header）避免冲突 - 如果项目已用 CSS-in-JS 或 WindiCSS 等方案，
scoped的价值会显著降低，甚至引发冗余
真正关键的是“谁该负责样式边界”——不是标签要不要加 scoped，而是团队是否对组件的样式所有权有共识。
