Vue 3 中必须用 :deep() 替代 /deep/ 和 ::v-deep，因后者非标准语法、已被弃用且易被预处理器误解析；:deep() 需配合外层选择器使用，括号内仅支持简单选择器，错误写法会导致穿透失效或全局污染。
Vue项目里用/deep/或::v-deep覆盖第三方组件样式
深度选择器不是CSS标准，是Vue编译器提供的穿透机制，用来打破scoped限制，命中子组件内部的元素。它只在Vue单文件组件的<style scoped>里有效，且不同版本写法不同。
常见错误现象：写了.my-comp /deep/ .van-button，但样式没生效——可能因为用了Less却误写成/deep/（应为/deep/），或Vue 3中/deep/已被废弃，必须改用::v-deep。
- Vue 2 + Less：用
/deep/，如.my-form /deep/ .el-input__inner { padding: 6px; } - Vue 3 + Less：必须用
::v-deep，且需加括号包裹选择器：::v-deep(.el-input__inner) { padding: 6px; } - 不加括号或写错大小写（如
::V-DEEP）会导致编译后选择器丢失，DevTools里完全看不到该规则 - 深度选择器会生成带属性选择器的高权重输出（如
.my-form[data-v-xxx] .el-input__inner），但它不解决“父容器class动态生成”导致的选择器失效问题——得配合实际DOM结构检查
用嵌套提升选择器权重：避开!important又稳定生效
Less里& &嵌套是最轻量、最可控的提权方式，不依赖HTML结构变动，也不污染全局命名空间。它本质是让同一个类名重复两次，把特异性从10拉到20，稳压大部分UI库的默认规则（如.el-button权重为10）。
典型场景：Ant Design的.ant-btn被你页面级样式覆盖失败，但又不想加!important破坏后续维护。
立即学习“前端免费学习笔记（深入）”；
- 写法：
.my-page { & & { .ant-btn { color: #1890ff; } } }→ 编译为.my-page.my-page .ant-btn - 别用
.my-page .ant-btn .ant-btn这种手动叠加，它不可靠：万一框架某天加了!important或更高权重组合（如[type="button"].ant-btn），就又失效 - 嵌套两层
& &比三层更安全：三层会产出.my-page.my-page.my-page，冗余且可能触发浏览器兼容性警告 - 这个技巧对动态class（如React的
data-reactroot）无效——它只提升你写的那部分选择器权重，不匹配运行时生成的class
Less @import顺序决定谁能覆盖谁
Less没有“样式模块化”概念，@import就是文本拼接。后@import的文件，其CSS规则在最终输出里位置靠后，同权重下自然覆盖前面的规则。这是最底层、最可靠的覆盖机制，但容易被忽略。
错误示范：把UI框架的Less文件（如ant-design.less）放在项目overrides.less之后导入，结果你的覆盖规则永远排在前面，白写。
- 正确顺序（入口
index.less中）：@import "variables.less"; @import "mixins.less"; @import "base/reset.less"; @import "components/*.less"; @import "overrides/antd-overrides.less"; - 所有
overrides/文件必须放在最后，且不能用@import (reference)——那种模式不输出CSS，等于没写 - 如果用了Webpack/Vite，确认
less-loader或lessOptions没把第三方样式打包进同一chunk里，否则@import顺序会被构建工具打乱 - 验证方法：查看最终生成的CSS文件，搜索
.ant-btn，看你的规则是否出现在框架规则之后
为什么!important在Less里特别危险
Less编译后仍是纯CSS，!important不会因嵌套或变量而降权。它一旦写上，就锁死优先级，后续任何常规手段（包括更高权重选择器）都难以推翻——除非也加!important，形成恶性循环。
真实踩坑点：团队协作时，A在button.less里写了.ant-btn { background: red !important; }，B想在某个页面调暗按钮，只能跟着加!important，最后全项目按钮样式变成一堆感叹号堆叠。
- 仅在两种情况可临时用：
第三方组件用<code>style属性动态注入内联样式，或框架强制用<code>:not()等高权组合且你无法控制HTML结构 - 每次用必须加注释，标明“临时hack，待重构”，否则半年后没人敢动
- 用
higher-spec()mixin替代：它不引入新语义，只稳定提权，后续还能被更具体的选择器（如.page-a .ant-btn）正常覆盖
data-reactroot或Vue的v-xxxx哈希，它们让所有预设选择器失效。这时候/deep/和& &都无能为力，得靠DevTools实时抓取真实class再写规则，或者推动业务层加稳定class。 
