Less嵌套规则模仿了HTML结构，这样写可以让代码更简洁、更具层次感，上一小段代码先了解下

Less代码：

#header{  color:black;  .navigation{    font-size:12px;  }  .logo{    width:300px;  }}

CSS编译代码：

#header {  color: black;}#header .navigation {  font-size: 12px;}#header .logo {  width: 300px;}

使用这种方法也可以在混合中包含伪类，常见的用法就是css reset里面的清除浮动

Less代码：

.clearfix{  zoom:1;  &:after{    content:'';    display:block;    clear:both;  }}

CSS编译代码：

.clearfix {  zoom: 1;}.clearfix:after {  content: '';  display: block;  clear: both;}

其中，&运算符表示一个嵌套规则的父选择器，常用于修改一个类或者定义伪类选择器，比如：

Less代码：

a{  color:blue;  &:visited{    color:red;  }  &:hover{    color:yellow  }}

CSS编译代码：

a {  color: blue;}a:visited {  color: red;}a:hover {  color: #ffff00;}

在上面清除浮动的代码中，如果不加&，会是什么效果呢？

Less代码：

.clearfix{  zoom:1;  :after{    content:'';    display:block;    clear:both;  }}

CSS编译代码：

.clearfix {  zoom: 1;}.clearfix :after {  content: '';  display: block;  clear: both;}

不难发现，这是一个典型的后代选择器，并不是我们想要的效果

&选择符的另一个非常重要的用途就是生产重复的类名，比如在写CSS公共样式的时候会有各种各样的button样式

Less代码：（在这里复习下less中引入路径的写法）

@p_w_picpaths:'../p_w_picpaths';.button{  &-ok{    background:url('../p_w_picpaths/1.jpg')  }  &-cancel{    background:url('@{p_w_picpaths}/2.jpg')  }  &-custom{    background:url('@{p_w_picpaths}/3.jpg')  }}

CSS编译代码：

.button-ok {  background: url('../p_w_picpaths/1.jpg');}.button-cancel {  background: url('../p_w_picpaths/2.jpg');}.button-custom {  background: url('../p_w_picpaths/3.jpg');}

&选择符可以在选择器中多次出现，反复引用父选择器，而不是重复父选择器的类名

Less代码：

.link{  &+&{    color:red;  }  & &{    color:purple;  }  &&{    color:silver;  }  &, &ish{    color:pink;  }}

CSS编译代码：

.link + .link {  color: red;}.link .link {  color: purple;}.link.link {  color: silver;}.link,.linkish {  color: pink;}

&选择符表示所有的父选择器，而不是特指最近的父选择器

Less代码：

.grand{  .parent{    &>&{      color:red;    }    & &{      color:green;    }    &&{      color:blue;    }    &,&ish{      color:black;    }  }}

CSS编译代码：

.grand .parent > .grand .parent {  color: red;}.grand .parent .grand .parent {  color: green;}.grand .parent.grand .parent {  color: blue;}.grand .parent,.grand .parentish {  color: black;}

&选择符还可以用于生成一个逗号分割列表的所有可能的选择器排列

Less代码：

p, a, ul, li {  border-top: 2px dotted #366;  & + & {    border-top: 0;  }}

CSS编译代码：

p,a,ul,li {  border-top: 2px dotted #366;}p + p,p + a,p + ul,p + li,a + p,a + a,a + ul,a + li,ul + p,ul + a,ul + ul,ul + li,li + p,li + a,li + ul,li + li {  border-top: 0;}