开发者学堂课程【移动 Web 前端开发：less-嵌套】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8486
less-嵌套
范例：利用嵌套语法编写合作伙伴模块样式
浏览 css 可以发现，由于代码太多，导致 css 的结构并不清晰，利用嵌套语法可以让 less 模块更清晰。
利用嵌套语法编写合作伙伴模块样式：
新建一个 less 文件命名为 partner，在 partner.less中编写：
.wjs_partner{//模块前缀
padding:30px 0;// partner的样式
ul{//把 ul 写在 partner 里说明 ul 是 partner 里面的模块。
按照嵌套的方式层层编写，在 partner.css 中生成出的代码就是按照这种结构生成出的代码，这就是语法的嵌套。
list-style:nome;
text-again:center;
padding:0;
}
}
li{//和 ul 中的内容同级
display:inline-block;
a{//a 在li 中书写
display:block;
margin:0 15px;
//实现 a：hover，可以直接在 li 中书写 a：hover{}，但是这样书写可能会表示为 a 和 a：hover 是同级的，但是 hover 是a 元素的某一个状态，应该在 a 里书写才能表现为层级关系。
可以使用另外一种写法表现 hover 是 a 的状态。如果直接在 a 后面书写 ：
hover{} 在 css 就会生成.wjs_partner ul li a hover,这是后代选择器，指 a 后面所有的元素 hover 的情况。
除了这种情况如果 a 有一个尾元素：::before{ content:’a’，这样生成的还是 a 的后代元素。所以这里可以加入连接符 &，把 a 和 hover 连接在一起。
&:hover{
color:#e92322;
}
//如果 a 后还有.的样式，比如:.Now,.red，也是加一个拼接符 &，把它们拼接在一起。
span{
font-size:60px;
在 patner.css 中生成的代码：
.wjs_partner{
padding:30px 0;
}
.wjs_partner ul{
list-style:none;
text-align:center;
padding:0;
}
.Wjs_partner ul 1i{
display:inline-block;
}
.Wjs partner ul li a{
display:block;
margin:0 15px;
}
.wjs_partner ul 11 a:hover{
color:#e92322;
}
.wis_partner ul 11a span{
font-s1ze:.60px;
}
利用嵌套语法编写，总体结构是 .wjs_partner 中包含 ul ，ul 中包含 li li 中包含 a，a 里有 hover和 span。这样使层级结构更清晰。
