什么是嵌套规则

• 嵌套规则模仿了html结构，让我们的代码更加简洁清晰

css写法

#container {
  background-color: red;
  width: 200px;
  height: 200px;
}
#container p {
  width: 200px;
  height: 100px;
  background-color: blue;
}
#container a {
  text-decoration: none;
}

less写法

#container{
  background-color: red;
  width: 200px;
  height: 200px;
  p{
    width: 200px;
    height: 100px;
    background-color: blue;
  }
  a{
    text-decoration: none;
  }
}

父元素选择器&

• &：表示当前选择器的所有父选择器

less

#container{
  background-color: red;
  width: 200px;
  height: 200px;
  p{
    width: 200px;
    height: 100px;
    background-color: blue;
    span{
      display: block;
      width: 50px;
      height: 50px;
      background-color: green;
      &:hover{
        background-color: black;
      }
    }
  }
  a{
    text-decoration: none;
  }
}

css

#container {
  background-color: red;
  width: 200px;
  height: 200px;
}
#container p {
  width: 200px;
  height: 100px;
  background-color: blue;
}
#container p span {
  display: block;
  width: 50px;
  height: 50px;
  background-color: green;
}
#container p span:hover {
  background-color: black;
}
#container a {
  text-decoration: none;
}

将&放在选择器的后面

• 第一种情况

.a{
  .b{
    .c &{
      color: red;
    }
  }
}

• 编译后

.c .a .b {
  color: red;
}

• 第二种情况

.a{
  .b{
    .c&{
      color: red;
    }
  }
}

• 编译后

.c.a .b {
  color: red;
}

• 第三种情况

p, a, ul, li{
  color: red;
  & &{
    background-color: blue;
  }
}

• 编译后

p,
a,
ul,
li {
  color: red;
}
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 {
  background-color: blue;
}