less中的嵌套類似于html中的標(biāo)簽的嵌套
直接舉例子比較爽：
html文件：
<div id="navBar">
<ul class="list">
<li><span>好好學(xué)習(xí)戒努，天天向上聋迎，我是列表1</span><a href="#">點(diǎn)擊</a></li>
<li><span>好好學(xué)習(xí)波势，天天向上废离，我是列表2</span><a href="#">點(diǎn)擊</a></li>
<li><span>好好學(xué)習(xí)廊勃，天天向上滑进，我是列表3</span><a href="#">點(diǎn)擊</a></li>
<li><span>好好學(xué)習(xí)钢颂，天天向上钞它，我是列表4</span><a href="#">點(diǎn)擊</a></li>
</ul>
</div>
之前寫(xiě)css樣式的寫(xiě)法：
#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寫(xiě)法：
#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不建議進(jìn)行多層嵌套，嵌套的層數(shù)越多殊鞭，性能就越差遭垛，所以盡量寫(xiě)同級(jí)盔夜；
- &:表示它的上一級(jí)選擇器段誊，多用于偽類；
