我们在使用CSS的时候，如果要为多级嵌套的元素设置样式，要么给元素添加类选择器或者ID选择器，要么使用后代选择器。例如：.xkd{font-size:14px;}.xkdp{line-height:25px;}.xkdpspan{color:#ccc;}虽然很容易理解，但没那么直观，很难理解保养方便。Less中的嵌套规则正好可以解决这个问题。嵌套规则允许一个选择器嵌套在另一个选择器中，这样代码看起来一目了然，方便后期维护。嵌套使用比如上面的CSS代码是用Less语言写的：.xkd{font-size:14px;p{行高：25px;跨度{颜色：#ccc;}}}这看起来整体上更直观吗？一些，一层一层。但是要注意，一般我们不会嵌套太多层，嵌套的层数越多性能越差，建议嵌套三层左右。&符号的使用当我们使用嵌套规则时，要特别注意&符号的使用。&符号可以指示对父选择器的引用。在内部选择器前面，如果没有&符号，内部选择器将被解析为父选择器的后代。如果内部选择器前面有&符号，则内部选择器将解析为父选择器本身或父选择器的伪类。示例：例如，我们看下面的代码：.xkd{a{color:#eee;}}编译成CSS代码：.xkda{color:#eee;}可以看到标签选择器a前面没有&符号，所以这个标签选择器a被解析为.xkd选择器的后代.示例：让我们看一下在内部选择器之前添加一个&符号：.xkd{&one{font-size:12px;}&:hover{颜色：#fff;}}编译成CSS代码：.xkdone{font-size:12px;}.xkd:hover{color:#fff;}上面代码中，前面加了一个&符号，表示父选择器本身，所以解析后是.xkdone。当然，:hover伪类前面的&符号也是如此。重新引用父选择器您可以使用与号(&)重新引用父选择器。例子：比如在下面的Less代码中，如果我们希望每个选择器名字的前缀都在top，我们可以简写如下：.xkd{&-one{font-size:14px;}&-two{字体大小：16px；}&-three{字体大小：18px；}}编译成CSS代码：.xkd-one{font-size:14px;}.xkd-two{font-size:16px;}.xkd-three{font-size:18px;}另外，你还可以同时使用多个&符号，使用其他运算符连接：.xkd{&&-one{font-size:14px;}&,&-two{字体大小：16px；}&,&er{字体大小：18px；}}编译成CSS代码：.xkd.xkd-one{font-size:14px;}.xkd,.xkd-two{font-size:16px;}.xkd,.xkder{font-size:18px;}改变选择器的顺序选择器的顺序是什么？有时可能需要将内部选择器放在父选择器之前。这时候我们可以把&放到当前选择器后面来完成。示例：例如，在下面的代码中，我们希望.xkd选择器在.nav选择器之前，可以在.xkd选择器之后添加一个&符号：.nav{font-size:14px;.xkd&{颜色：#fff;}}编译成CSS代码：.nav{font-size:14px;}.xkd.nav{color:#fff;}可以看到编译后的CSS代码中.xkd选择器在.nav选择器的前面。小结本节我们主要掌握Less中的嵌套规则和&符号的使用。&符号可以代表父选择器。最后，记得使用嵌套的时候不要嵌套太多层，会影响性能。链接：https://www.9xkd.com/
