javascript - LESS 在 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 Css 隐藏第一个 .btn-delete 按钮吗？

谢谢! :)

Answer 1

当您使用 btn-delete 类定位按钮时，您需要 & 运算符

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

OR，传统方式

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