- less写法示例
<div class="parentDiv">
<div class="childDiv">childDiv1</div>
<div class="childDiv">childDiv2</div>
<div class="childDiv">childDiv3</div>
<div class="childDiv">
<p class="childDiv--aa">
childDiv4
</p>
</div>
</div>
.parentDiv{
color: black;
.childDiv{
&:first-child{
color: red;
}
&:nth-child(2){
color: green;
}
&:last-child {
color: antiquewhite;
}
&::before, &::after {
// ...
}
&--aa {
// ...
}
}
}
- less中使用
&
符号代表该类自身,后面可以是before、after等css中有的伪类等,也可以直接拼接类名 - less 样式设置父元素中某个子元素的样式,在同一个组件中,嵌套设置样式没问题,但是在父组件的类中嵌套设置子组件类的样式,样式会不生效,需要在父组件中设置子组件的类