如何利用Less的父选择器标识符实现复杂的CSS伪元素定义？-css教程-PHP中文网

Less 中 & 必须紧贴伪元素（如 &::after），空格会导致生成后代选择器；BEM 修饰符需注意拼接逻辑；& 仅绑定字面最近父选择器，不响应动态类名。

如何利用less的父选择器标识符实现复杂的css伪元素定义？

Less 的 & 能帮你写出紧凑、可维护的伪元素规则，但稍不留神就会编译出完全错误的选择器——比如本想控制自身 ::after，结果生成了后代匹配。

这是最常踩的坑。Less 把 & ::after（中间有空格）解析为后代选择器 .btn ::after，而你要的是 .btn::after。

前者是“悬停时渲染自身的伪元素”，后者是“悬停时渲染子元素里的伪元素”，语义和效果天差地别。

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

下载

当父选择器本身含 BEM 修饰符（如 .btn--large），&__icon 会严格拼成 .btn--large__icon，这符合 BEM 规范；但如果你本意是 .btn__icon--large，就不能靠 & 直接生成。

✅ 正确拼接：.btn--primary { &__text { font-weight: bold; } } → .btn--primary__text
❌ 无法实现：.btn { &__icon--large { ... } } → .btn__icon--large（没体现修饰符层级）
? 替代方案：改用变量或嵌套一层再用 &，例如 .btn { &__icon { &--large { ... } } }

真正麻烦的不是语法本身，而是当你把 & 嵌在多层媒体查询或条件 mixin 里时，它只绑定**字面最近的父选择器**，不感知运行时类名变化——比如动态加的 .theme-dark 不会被 & 继承。这种隐性限制，往往要到样式失效才被发现。