一般情况

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：

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

用 Less 语言我们可以这样书写代码：

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

用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。

使用伪类/伪元素选择器的情况

以上是一般选择器的场合，如果你希望使用 伪类/伪元素 选择器，则需要使用 &符号
image.png

// less嵌套
.header {

  //   1. less嵌套 子元素的选择器和样式 直接写到父元素选择器中
  a {
    color: red;

    // 2.如果使用伪类/伪元素/交集选择器，则需要使用 &符号 来代指父级（这里的父级就是a）
    // :hover {}  这样直接写是不对的 最后会编译成 a :hover {}，会把:hover当作a的一个孩子
    // 正确写法：
    &:hover {
      color: blue;
    }
  }
}

其实 & 符号就代表父元素本身，也就是自身所处的大括号的所有者。