如何在Less中引用父级选择器符号“&”实现复杂的CSS组合？-css教程-PHP中文网

Less中&只绑定直接父级选择器，不跨层继承，嵌套多层时需逐层使用&，超过3层建议拆分；其展开为当前选择器完整前置路径，非仅最近一层。

如何在less中引用父级选择器符号“&”实现复杂的css组合？

Less中`&`到底能嵌套几层？

Less的&不是简单拼接，而是代表**当前选择器的完整前置路径**。它在嵌套规则里展开时，会把外层所有层级的选择器原样带进来，不是只取最近一层。

比如.btn { &__icon { ... } }编译后是.btn__icon；但.container { .sidebar { &__title { ... } } }会生成.container .sidebar__title——注意中间是空格，因为.sidebar是独立选择器，&只继承它自身，不“穿透”到.container。

&永远绑定在**直接父级选择器**上，不会跨多层向上追溯
如果想让&带上更外层的上下文，得用显式重复，比如.container .sidebar { .container--active & { ... } }
嵌套过深时，&展开后选择器可能冗长甚至语义错乱，建议超过3层就考虑拆成独立类名

用`&`模拟BEM但又不想写死前缀

BEM风格里.block__element--modifier这种结构，靠&可以避免重复写.block，但要注意&本身不带分隔符。

错误写法：.btn { &__text { ... } &--primary { ... } } → 编译为.btn__text和.btn--primary，看起来对，但&--primary实际是.btn--primary，不是BEM要求的.btn--primary（这反而是对的）；真正容易错的是&__text--bold，会变成.btn__text--bold，而非.btn__text--bold（语法上没错，但逻辑上--bold应修饰__text，这时没问题）。

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

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

下载

要生成.block__element--modifier，必须写成&__element--modifier，不能写&__element &--modifier
&后面直接跟--或__是安全的；但& + &__icon这种加号连接会报错，Less不支持运算符拼接
如果块名是变量，比如@block: btn，不能写@{block} { &__text { ... } }，因为&展开时不参与变量插值，得用.@{block}__text手动拼

`&`在伪类和属性选择器里怎么用？

&:hover、&[disabled]这些常见，但容易忽略两点：一是&必须紧贴冒号或方括号，中间不能有空格；二是复合伪类如&:not(:first-child)必须整个写在&后面，不能拆开。

正确：.link { &:hover { color: blue; } &[aria-disabled="true"] { opacity: 0.5; } }
错误：.link { & :hover { ... } }（多了空格，编译成.link :hover，变成后代选择器）
错误：.input { &:focus &:valid { border-color: green; } }（这是两个独立规则，不是组合），要组合就得写&:focus:valid
属性选择器里&后直接跟[attr]没问题，但&[attr="val"]中的引号必须是英文双引号或单引号，不能用中文符号

为什么`&`有时编译出意料之外的选择器？

最常见原因是嵌套层级和&作用域理解偏差。比如.card { .header { & + .body { ... } } }，本意可能是“.card .header + .body”，但实际编译为.card .header + .card .body——因为&在.header作用域内，所以& + .body展开成.card .header + .card .body。