根本原因是Vue 3的scoped编译机制为选择器添加[data-v-xxx]属性，而Element Plus组件DOM无此属性导致不匹配；:deep()必须嵌套在外层容器类下才生效，且不能写后代选择器、不可用于Teleport或Shadow DOM场景。
为什么 .el-button 直接写在 <style scoped> 里不生效
根本原因不是选择器写错了，而是 Vue 3 的 scoped 编译机制让样式“找不到目标”。<style scoped> 会自动给所有选择器加上属性选择器（如 [data-v-abc123]），而 Element Plus 这类库渲染出的 DOM 节点（比如 <button class="el-button">）并不带这个属性，两边对不上号。
常见错误现象：
- 样式写了，DevTools 里能看到规则，但始终被划掉
- 用
inspect确认目标元素 class 名完全正确，依然无效 -
:deep(.el-button)单独写在<style scoped>顶层 → 编译后直接被丢弃，不生成任何 CSS
必须满足两个条件才有效：外层有真实存在的容器类 + :deep() 嵌套其中。例如：
.my-form :deep(.el-input__inner) {
padding: 8px 12px;
}
:deep() 写了却没生效的三个硬性限制
:deep() 不是万能穿透开关，它受语法、结构和 DOM 位置三重约束：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 不能写成后代选择器：
:deep(.el-button .el-button__inner)会失效；只能写:deep(.el-button__inner) - 目标元素若在
<teleport>或<el-dialog>内部 → 它已脱离当前组件树，:deep()失效，此时必须提至全局样式文件，或改用:global(.el-button) - 动态类名（如
el-input--large）要以 DevTools 实际渲染出的 class 为准，别照文档硬写 —— 文档类名可能和运行时不一致
加载顺序和特异性才是真正的胜负手
哪怕你写了 !important，如果组件库 CSS 在你的样式之后加载，照样被覆盖。浏览器只认“最后定义 + 最高特异性”。
- 确保自定义 CSS 在
main.ts中import得比组件库 CSS 更晚，例如：import 'element-plus/dist/index.css'→import './styles/overrides.css' - 优先组合组件库原生类名：
.el-button.my-primary比.my-primary权重更高，也更稳定 —— 只要库还挂el-button类，你的样式就还在 - 避免用 ID 或内联 style：
id="btn"权重虽高，但不可复用、难测试，且一旦组件库升级加了!important就可能反向压制你
遇到 Shadow DOM、<teleport> 或内联 style 怎么办
这三类情况，CSS 选择器再强也无效。权重不是问题，而是根本选不到。
- 内联样式（
style="color: red"）：权重为 1000，高于所有外部 CSS 包括!important；必须用 JS 改：el.style.setProperty('color', 'blue', 'important') - Shadow DOM（如某些 Web Components）：查文档是否支持
::part()，例如my-component::part(input) { border: 1px solid red; } -
<teleport to="body">内容：DOM 已脱离当前组件作用域，:deep()失效，唯一可靠方式是把覆盖样式写进全局 CSS 文件，并确保它在组件库样式之后加载
真正容易被忽略的是：你以为在改样式，其实是在和 DOM 结构、加载时机、作用域边界打交道。写对选择器只是第一步，后面每一步都可能卡住。
