Less从入门到精通——嵌套规则（附学习视频、源码及笔记）

完整学习视频及资料在这里哦~
链接：https://pan.baidu.com/s/1XHxElnc2N-qwg2f2J30Qyw
提取码：4k8t

嵌套规则

嵌套规则它模仿了HTML的结构，让我们的CSS代码更加简洁明了清晰

1. 子元素嵌套

可以将子元素的样式直接写在父元素的里面，形成嵌套

header{
	color:green;
	// 表示选择 header的子元素p 并设置其样式
	p{					
	    color:red;
	}
}
// 输出为：
header {
  color: green;
}
header p {
  color: red;
}

2. 父元素选择器 （&在前）

上面讲解了怎么选到子元素，那如果不是子元素呢，这里的& 就表示当前选择器的所有父选择器。

header{
      :hover{				      // 没有写 & 会以为是给子元素的样式
            color:green;
      }
      p{
            &:hover{			      // 而 & 表示选中了当前选择器 即 p
                  color:pink;
            }
      }
}
// 输出为
header :hover{					// 输出时“ :” 前有空格,经过header的所有子元素都会执行以下CSS样式
	background-color:green;		        // 只要经过header的孩子都会变色
}
header p:hover{					// 输出时没有空格
	color:pink;				// 鼠标经过p标签，字体颜色变成粉色
}

所以为了避免混乱，伪元素前不要忘记加 “ & ” 哟~

3. 改变选择器的顺序（&在后）

将“ & ” 放在当前选择器之后，就会将当前选择器插入到所有的父选择器之前

.header{
      p{
            .conter &{		 // 注意 & 前有空格
                  color:red;
            }
            .footer&{		// 没有空格时，提到前面时也没有空格
                  color:green;
            }
      }
}
// 输出为
.conter .header p{
      color:red;
}
.footer.header p {
      color: green;
}

4. 组合使用生成所有可能的选择器列表（两个&）

.header,ul,li{
    & &{
        color: pink;
    }
}
// 输出为
.header .header,
.header ul,
.header li,
ul .header,
ul ul,
ul li,
li .header,
li ul,
li li {
  color: pink;
}
// 输出结果时选择器总个数为 n²
// 解析
// 第一个 & 表示当前父选择器，即先取 “ .header ”，选中之后第二个 & 将其插入到所有父元素之前，
// 即：将其分别插入到3个父选择器之前，然后继续取“ ul ”相同做法，依次类推，就形成了这样的组合

此为2和3的一种推广形式，我们可以根据自己的功能需求选择合适的用法。
以上均为自己理解，若有不当，还请指出~ ^_
笔记是不断更新的哦~