微信訂閱號(hào):Rabbit_svip
less的嵌套是可能是在開發(fā)過程中用得最多的一個(gè)神技了。容易上手母谎,容易書寫覆山。
先來(lái)看看 html 結(jié)構(gòu),大概就懂什么是嵌套了
<ul>
<li>
<a href="#">鏈接1</a>
</li>
<li>
<a href="#">鏈接2</a>
</li>
<li>
<a href="#">鏈接3</a>
</li>
</ul>
可以看到端幼,上面的 html 結(jié)構(gòu)是 ul 包括這 li 礼烈, li 包括這 a 。
less代碼添加樣式
ul {
margin: 0;
li {
float: left;
list-style-type: none;
width: 30px;
a {
text-decoration: none;
color: aquamarine;
}
}
}
轉(zhuǎn)換后的css代碼
ul {
margin: 0;
}
ul li {
float: left;
list-style-type: none;
width: 30px;
}
ul li a {
text-decoration: none;
color: aquamarine;
}
可以看出婆跑,css 的樣式是有嵌套關(guān)系的此熬。
而在 less 中,書寫的時(shí)候,直接把子級(jí)元素寫在父級(jí)元素里面就行犀忱。