less写法示例

• 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 样式设置父元素中某个子元素的样式，在同一个组件中，嵌套设置样式没问题，但是在父组件的类中嵌套设置子组件类的样式，样式会不生效，需要在父组件中设置子组件的类