Vue 3 中必须用 ::v-deep(.selector) 替代 /deep/ 和 :deep()，因后者非标准、已废弃且易被预处理器误解析；::v-deep 需加括号包裹简单选择器，大小写敏感，漏括号或写错即失效。
直接用 !important 大概率压不住，不是你写错了，而是第三方组件的样式注入时机、权重结构或封装机制（比如 Shadow DOM）已经把你拦在了渲染链之外。
Vue 项目里用 ::v-deep 或 /deep/ 穿透 scoped 样式
这个操作只在 Vue 单文件组件的 <style scoped> 里有效，本质是编译器生成带属性选择器的高权重规则，不是 CSS 标准语法。
- Vue 2 + Less：必须写
/deep/，不能写成::v-deep或:deep，否则编译后整条规则消失 - Vue 3 + Less：
/deep/已废弃，必须用::v-deep(.el-input__inner)，括号不能省——漏了就等于没写 - 大小写敏感：
::V-DEEP或::v-Deep都无效；DevTools 里搜不到对应 CSS 规则，基本就是这里错了 - 它不解决动态 class 名问题，比如 Element Plus 的
el-button--primary在 v3.4+ 可能变成el-button--primary-abc123，得配合[class*="button--primary"]或官方 theme API
用 & & 嵌套提升选择器特异性
比 !important 更可控，不破坏后续主题切换，也不依赖 HTML 结构是否稳定。
- 写法：
.my-page { & & { .el-button { color: #1890ff; } } }→ 编译为.my-page.my-page .el-button - 特异性从 10 升到 20，稳压大多数 UI 库默认规则（如
.el-button权重为 10） - 别手动写
.my-page .el-button .el-button：万一组件内部加了[type="button"]这类属性选择器，权重立刻反超 - 三层
& & &会产出.my-page.my-page.my-page，冗余且某些老浏览器会警告
Less @import 顺序决定谁能覆盖谁
Less 没有模块依赖图，只有 CSS 层叠顺序。@import 的位置 = 最终 CSS 规则出现的位置，后导入的同名选择器自然覆盖前面的。
立即学习“前端免费学习笔记（深入）”；
- 正确顺序应是：变量/混合 → 通用样式 → 组件样式 → 主题覆盖层（比如
theme/dark.less） - 常见翻车点：
ant-design/dist/reset.css在main.ts里 import 得比你自己的index.less晚，结果你的覆盖规则被它的新规则盖掉 - 路径必须用绝对别名：
@import "mixins/button-override";，禁用@import "../mixins/button-override"——嵌套层级一深，路径就解析错 - Webpack 用
less-loader的paths，Vite 用lessOptions.paths，都得指向src/styles
避开 Shadow DOM 和内联样式的硬伤
如果你的 DevTools 里看到 #shadow-root 节点，或者元素上挂着 style="color: red"，那 ::v-deep 和 & & 全部失效。
- Shadow DOM 内部只能用
::part()（如果组件支持）或:host在自定义元素内部覆盖 - 内联样式优先级高于所有外部 CSS，包括
!important；必须用 JS 改：el.style.color = 'red'或el.setAttribute('style', 'color: red !important') - Ant Design、MUI 这类库常用哈希 class 名（
css-1a2b3c），硬写.ant-btn是赌运气；优先走官方 theme 配置，比如ConfigProvider的themeprop - 用
[class*="btn"]或[data-testid="my-btn"]定位更可靠，但别滥用——容易误伤其他组件
真正难的不是写对语法，而是得先判断样式到底卡在哪一层：是 scoped 隔离？是 Shadow DOM 封装？是 JS 动态注入？还是 class 名被哈希了？没定位清楚就瞎加 !important 或 ::v-deep，只会让问题更难回溯。
