伪类嵌套必须紧贴&无空格，否则编译为后代选择器导致样式失效；复合伪类如&:not()、&:is()须整体紧跟&；多伪类串联需写同一行如&:focus:valid；伪元素同理；bem中&拼接需注意层级，动态类名不被&捕获。

& 必须紧贴伪类，否则编译出的选择器语义全错——这是最常导致样式失效的硬伤。

伪类嵌套必须紧贴 & 写，不能有空格

Less 把 & :hover（中间有空格）解析为后代选择器，比如 .btn :hover，实际匹配的是 .btn 内部任意元素的悬停状态，而不是 .btn 自身。你要的是 .btn:hover，就必须写成 &:hover。

常见错误场景：

• 手误多打一个空格：& :focus → 编译为 .input :focus
• 复制粘贴带中文空格：&：hover（中文冒号）→ 编译失败或生成无效规则
• 在编辑器自动补全后没删空格，尤其 VS Code 的 Less 插件有时会插入多余空格

&:not() 这类复合伪类必须整体跟在 & 后面

&:not(:first-child) 是合法的，它展开为 .list-item:not(:first-child)；但如果你拆成 &:not 和 :first-child 两行，Less 不会合并，而是生成两个独立规则，或者直接报错。

注意点：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• &:not(.disabled) 可以，但 &:not 单独一行无意义
• &:is(:hover, :active) 同理，整个伪类函数必须紧跟 &
• 嵌套多层时，& 只绑定字面最近父选择器，不会“穿透”到外层媒体查询或 mixin 中的条件判断

多个伪类串联必须写在同一行，不能用空格分隔

想表达“既聚焦又有效”，得写 &:focus:valid，不是 &:focus &:valid（后者是两条独立规则），更不是 &:focus &:valid 加空格（那会变成 .input:focus .input:valid，后代关系）。

典型误用：

• &:hover &:active → 错误地生成两个规则，且第二个带空格变成后代选择器
• &:hover:active → 正确，表示同时满足两个伪类的状态（虽然浏览器支持有限，但语法合法）
• 涉及 ::before 等伪元素时，同样适用：&:hover::before ✅，&:hover ::before ❌

BEM 场景下 & 拼接修饰符要小心层级语义

在 BEM 命名中，.btn--primary 是修饰符，&__icon 会严格拼成 .btn--primary__icon，这符合规范；但如果你本意是给图标加尺寸修饰符（如 .btn__icon--large），就不能靠单层 & 直接生成。

可行做法：

• 写成 .btn { &__icon { &--large { ... } } }，让 & 在第二层重新绑定 .btn__icon
• 避免三层以上嵌套，否则 & 展开路径变长、可读性骤降，也容易漏掉某一层的拼接逻辑
• 动态类名（如运行时加的 .theme-dark）不会被 & 捕获——它只认静态嵌套结构，这点极易被忽略

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！