前端css 同级元素 设置不同样式 :first-child :nth-child() 的操作收藏

Posted 2021-03-25 xuchao0506

说明：最近在写前端vue  调样式的时候遇到了一个问题 同一个div下对多个同级别的<span>标签进行 边距设置

<div class="shuju-div">
  <span>数据A</span>
  <span>数据B</span>
  <span>模型C</span>
  <span>模型D</span>
  <span>模型E</span>
  <span>场景F</span>
</div>

<style>
    .shuju-div {
      margin-top: -240px;
      margin-left: 78px;
      z-index: 99999;
      position: absolute;
    }
    .shuju-div > span {
      color: #68e3d5;
      font-family:"微软雅黑";
      font-size: 14px;
    }
    // nth-child()的索引是从1开始的
    .shuju-div > span:nth-child(1) {
      margin-left: 60px;
    }
    .shuju-div > span:nth-child(2) {
      margin-left: 60px;
    }
    .shuju-div > span:nth-child(3) {
      margin-left: 45px;
    }
    .shuju-div > span:nth-child(4) {
      margin-left: 60px;
    }
    .shuju-div > span:nth-child(5) {
      margin-left: 60px;
    }
    .shuju-div > span:nth-child(6) {
      margin-left: 50px;
    }
</style>

//其中span:nth-child(1)可以被替换为 sapn:first-child
    .shuju-div > span:first-child {
      margin-left: 60px;
    }
//但是 并没有 什么 second-child  ··· 但是有 last-child

 总结：这个是对面同事跟我说的，很感谢他。咱前段基础很菜  但是不怕菜，点滴积累即可