针对第一类html结构，如何通过父选择器更优雅的写样式&.现在让我们从&的基本用法开始，一步一步来。为了方便我们使用命令行进行测试，请全局安装lessnpminstallless-g//当前版本：3.11.3下面的例子都是基于BEM编写样式的常见业务场景。相信看到这篇文章的同学在使用BEM规则写样式的时候，代码肯定会显得很洋气。基本用法&运算符指示嵌套规则的父选择器。以上是&forless的官方定义（请务必深入理解）。让我们通过示例来逐步了解一下。.header{&__text{颜色：#000;&--active{颜色：#fff;}}&:before{内容：'';显示：块；}&.test3{字体大小：12px；}}通过lessc编译后：.header__text{color:#000;}.header__text--active{color:#fff;}.header:before{content:'';显示：块；}.header.test3{字体大小：12px；如您所见，&指的是最近的完整父级。为什么要强调完整父类，.header__text--active而不是.text-active就是最好的证明。可能很多同学对&的用法到此为止（包括我自己和很多工作多年的同事，是的，我用下面的例子来测试他们，哈哈哈哈），如果你对“工程”有追求的话卓越”，请继续阅读。进阶用法对于开头提到的html结构，如何优雅的写出active状态的样式覆盖困扰了我好久，有段时间甚至写过这样的代码：.tag{&__img{width:100px;高度：100px；}&__text{字体大小：14px；颜色：#fff；}&--active{.tag__img{背景：#000；}.tag__text{颜色：#000；}}}非常难看。其实，如果你真的能理解父选择器，仔细想想，摒弃惯性思维，你完全可以写出如下代码：.tag{&__img{width:100px;高度：100px；}&__text{字体大小：14px；颜色：#fff；}&--active&__img{背景：#000；}&--active&__text{颜色：#000;}}使用lessc命令查看它的样子：.tag__img{width:100px;高度：100px;}.tag__text{字体大小：14px;color:#fff;}.tag.tag--active.tag__img{background:#000;}.tag.tag--active.tag__text{color:#000;}请仔细消化，其实&是存在的取代父母。在上述场景的基础上，我们再想想另一种类似的情况：222