css设置子元素的样式

 <div className='box'>
      <div className="box-list">1</div>
      <div className="box-list">2</div>
      <div className="box-list">3</div>
      <div className="box-list">4</div>
      <div className="box-list">5</div>
</div>

如上所示，一个大的盒子包裹着五个小的盒子，在类名相同的情况下，给他设置不同的样式

css样式

.box {
    width: 100%;
    height: 100%;

    .box-list{
      padding-left: 50%;
      margin-top: 10px;
    }
    .box-list:first-child{
      color: red;
      font-size: 24px;
    }
    .box-list:nth-child(2){
      font-size: 24px;
      color: blue;
    }
    .box-list:nth-child(3){
      font-size: 24px;
      color: rgb(109, 172, 13);
    }
    .box-list:nth-child(4){
      font-size: 24px;
      color: rgb(20, 152, 172);
    }
    .box-list:last-child{
      font-size: 24px;
      color: rgb(172, 20, 94);
    }
    
  }

我的css样式是在less文件中写的，所示使用了样式嵌套，如果是css文件，就正常写样式即可

页面效果

first-child：选择第一个元素

nth-child(2)：（）括号中的数字写我们对应的值

last-child：最后一个元素