前端css 同級元素 設置不同樣式 :first-child :nth-child() 的操作收藏

說明：最近在寫前端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

 總結：這個是對面同事跟我說的，很感謝他。咱前段基礎很菜  但是不怕菜，點滴積累即可