less中的嵌套类似于html中的标签的嵌套
直接举例子比较爽：
html文件：
<div id="navBar">
<ul class="list">
<li><span>好好学习，天天向上，我是列表1</span><a href="#">点击</a></li>
<li><span>好好学习，天天向上，我是列表2</span><a href="#">点击</a></li>
<li><span>好好学习，天天向上，我是列表3</span><a href="#">点击</a></li>
<li><span>好好学习，天天向上，我是列表4</span><a href="#">点击</a></li>
</ul>
</div>
之前写css样式的写法：
#navBar {
width: 500px;
margin: 0 auto;
border: 1px solid red;
border-radius: 10px;
}
#navBar > .list > li {
list-style: none;
margin: 10px;
}
#navBar > .list > li:hover {
background: yellow;
}
#navBar > .list > li > span {
font-size: 16px;
color: red;
height: 20px;
line-height: 20px;
}
#navBar > .list > li > a {
text-direction: none;
float: right;
}
使用less写法：
#navBar {
width: 500px;
margin: 0 auto;
border: 1px solid red;
border-radius: 10px;
li {
list-style: none;
margin: 10px;
&:hover {
background: yellow;
}
}
span {
font-size: 16px;
color: red;
height: 20px;
line-height: 20px;
}
a {
text-direction: none;
float: right;
}
}
需要注意的是：
- css不建议进行多层嵌套，嵌套的层数越多，性能就越差，所以尽量写同级；
- &:表示它的上一级选择器，多用于伪类；
