css同级元素 设置不同样式

css同级元素 设置不同样式

<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