必须用&[data-type="menu"]才能拼接父选择器，否则会脱离上下文编译为全局规则；&是绑定父级的强制标记，非可选语法糖，常见错误是漏写&导致选择器失效。
Less里怎么写属性选择器嵌套才不丢掉父级上下文
直接在嵌套块里写[data-type="menu"]会脱离父选择器，编译成独立规则；必须用&[data-type="menu"]才能拼接。这是最常漏掉的&——它不是可选语法糖，而是绑定父级的强制标记。
常见错误示例：.nav { [data-open="true"] { display: block; } } → 编译为[data-open="true"]（全局匹配），不是你想要的.nav[data-open="true"]。
正确写法要点：
-
.nav { &[data-open="true"] { display: block; } }→ 输出.nav[data-open="true"] - 多个属性组合：
&[data-open="true"][data-anim="slide"] - 避免空格：
& [data-open]会变成后代选择器，&[data-open]才是属性拼接 - 伪类+属性要一起写：
&:hover[data-open="true"]，不能拆成&:hover块里再写[data-open]
嵌套属性选择器时如何控制权重和特异性
属性选择器本身权重是 0,1,0，和类名一致；但嵌套后生成的完整选择器（如.sidebar[data-collapsed="true"]）权重叠加，比单个[data-collapsed]高得多。这不是Less的问题，而是CSS层叠规则本身。
容易踩的坑：
- 用
.menu &.is-active这种写法，会生成.menu .menu.is-active（注意中间空格），权重翻倍且语义错乱 - 想覆盖第三方库样式时，嵌套属性选择器反而让权重过高，后期得用
!important硬顶 - 移动端适配中，
@media (max-width: 768px) { .nav &[data-mobile="true"] { ... } }会导致断点内所有规则重复输出，建议把属性逻辑抽到 mixin 里
什么时候该用属性选择器嵌套，而不是class切换
属性选择器适合表达「状态不可控」或「JS动态注入」的场景，比如data-*由框架/脚本写入、服务端渲染的初始状态、或需要规避class命名冲突的插件集成。它不是替代.is-open的通用方案。
实操判断标准：
- 状态由外部系统控制（如React组件props映射到
data-属性）→ 用属性嵌套 - 纯CSS交互（hover/focus）→ 优先用伪类，别硬套
[data-hover="true"] - 需要过渡动画的显隐控制 → 属性选择器配合
transition没问题，但visibility和opacity必须同步控制，否则点击穿透 - 构建工具启用了CSS压缩（如cssnano）→ 检查是否开启
reduceTransforms: false，否则[data-*]类可能被误删
嵌套属性选择器与BEM、CSS Modules的兼容性问题
Less编译阶段就展开属性选择器，和运行时无关；但它和BEM修饰符、CSS Modules局部作用域存在天然冲突。
典型问题：
- BEM写法
.menu__item[data-state="disabled"]没问题，但若用.menu__item { &[data-state="disabled"] { ... } }，输出仍是.menu__item[data-state="disabled"]，没破坏BEM结构 - 在CSS Modules中使用
:local(.nav) { &[data-fixed="true"] { position: fixed; } }，编译后类名会被哈希化，但data-属性不受影响，实际生效的是.nav_hash123[data-fixed="true"] - 如果项目混用CSS-in-JS（如emotion），Less嵌套的属性选择器无法被JS运行时动态识别，只能作为静态兜底样式
真正麻烦的是调试：浏览器开发者工具里看到的是最终CSS选择器，无法反推原始Less嵌套层级，尤其当多个&[data-xxx]分散在不同文件时，定位成本陡增。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
