scoped 通过为选择器添加[data-v-hash]实现样式隔离，.parent .child要求两者同属一个组件；子组件dom无父组件hash，故需:deep()穿透，且必须接在有效祖先选择器后；less嵌套不改变dom关系，@import的class默认全局。
scoped 本身不依赖 Less，它只是 Vue 编译器对普通 CSS 做的属性选择器注入；Less 只负责变量、嵌套、mixin 等预处理，编译完才轮到 scoped 生效。直接写 <style lang="less" scoped></style> 没问题，但很多人卡在穿透子组件、层级误判、或误以为 Less 嵌套能替代 DOM 结构匹配。
为什么 .parent .child 在 scoped less 里经常不生效
scoped 的原理是给每个选择器末尾加 [data-v-xxxx]，比如 .parent .child 会变成 .parent[data-v-xxx] .child[data-v-xxx] —— 注意：两个类都带了相同哈希属性。这意味着 .child 必须和 .parent 在同一组件内、且真实存在于模板中，否则根本匹配不到。
- 子组件（如
<el-input></el-input>）的 DOM 不带父组件的data-v-xxx，所以.form .el-input__inner这种写法在 scoped 下完全无效 - Less 嵌套（如
.form { .el-input__inner { ... } }）不会生成父子 DOM 关系，只影响 CSS 选择器结构，编译后仍是.form[data-v-x] .el-input__inner[data-v-x] - slot 插入的内容、
v-for渲染的第三方组件、异步加载的子组件，都不受当前 scoped 影响
:deep() 和 ::v-deep 怎么选、怎么写才不报错
Vue 3 推荐用 :deep()，Vue 2 兼容写法是 ::v-deep；但它们不是万能的，必须接在有效祖先选择器后面，且不能单独存在。
-
:deep()必须写在某个已有选择器内部，比如.my-form :deep(.el-input__inner)✅，不能写成:deep() .el-input__inner❌ - Less 中若用
::v-deep，某些 less-loader 版本（尤其搭配 Vite）需写成/::v-deep/ .el-button才能正确解析，否则会被 Less 编译器忽略 - 穿透目标必须是子组件模板里真实存在的 class，比如
el-input__inner是 Element Plus 输入框根元素的类，而你随便写的.my-btn如果没出现在子组件 DOM 上，就毫无作用 - 如果子组件自己也用了
scoped，它的内部样式不会被你的:deep()覆盖——除非它暴露了defineExpose或支持class-prefix配置
Less 的 @import 和 scoped 共存时的坑
Less 的 @import 只做内容拼接，不参与 scoped 作用域控制。导入的变量能用，但其中定义的 class 名仍可能全局注入。
-
@import './vars.less'没问题，变量、mixin 可复用；但如果vars.less里写了.reset { margin: 0 }，这个类就会变成全局样式，不受 scoped 约束 - 想让导入的样式也被 scoped，得把被导入文件也写成
<style scoped lang="less"></style>形式，或者改用./vars.module.less+import styles from './vars.module.less'（仅适用于支持 CSS Modules 的构建工具） - Vite 默认对
.module.less开启 modules，Webpack 则需手动配css-loader?modules，否则@import进来的样式照样污染全局
真正容易被忽略的是：scoped 和 :deep() 是两层逻辑——前者靠属性选择器隔离，后者靠编译器识别并剥离该部分的选择器限制。一旦写错层级、漏掉祖先锚点、或误信 Less 嵌套能模拟 DOM 路径，样式就会静默失效，连浏览器开发者工具都看不出明显报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
