較少隱藏DIV中具有類的第一個元素

Question

我目前正在嘗試使用LESS隱藏按鈕。 我的HTML看起來是這樣的：

<div class="targets">
   <div class="target">
      <div class="form-group">
         <div class="col-md-12">
            <button type="button" class="btn-delete" />
         </div>
      </div>
   </div>
</div>

問題：我使用jQuery將“目標” div添加到“目標” div，經過DOM操作后，html如下所示：

<div class="targets">
   <div class="target">
      <div class="form-group">
         <div class="col-md-12">
            <button type="button" class="btn-delete" />
         </div>
      </div>
   </div>
   <div class="target">
      <div class="form-group">
         <div class="col-md-12">
            <button type="button" class="btn-delete" />
         </div>
      </div>
   </div>
   <div class="target">
      <div class="form-group">
         <div class="col-md-12">
            <button type="button" class="btn-delete" />
         </div>
      </div>
   </div>
</div>

我一直想用btn-delete類隱藏第一個按鈕 。 我用LESS。

我當前的LESS看起來像這樣：

.targets {
    button[type="button"] {
        .btn-delete {
            visibility: hidden;
        }
    }
}

不幸的是，我的LESS編碼無法正常工作。

您知道如何解決此問題，從而始終用LESS Cs隱藏第一個.btn-delete按鈕嗎？

謝謝！ :)

Answer 1

當您使用btn-delete類定位按鈕時，您需要&運算符

.targets {
    button[type="button"] {
        &.btn-delete {
            visibility: hidden;
        }
    }
}

或 ，傳統方式

.targets {
    button[type="button"].btn-delete {
            visibility: hidden;
    }
}

Answer 2

它將可見性應用於按鈕內具有類的元素，因此

.targets {
  button[type="button"].btn-delete {
    visibility: hidden;
  }
}

將使用類.btn-delete尋找button [type =“ button”]。

Answer 3

你好使用下面的代碼它可以正常工作

.targets{
    .target:first-child{  
       button[type="button"] {
        &.btn-delete{ 
          visibility: hidden;
        }
      }
   }
}