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将“target”div添加到“targets”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;
    }
}

Answer 2

它将可见性应用于具有按钮内部类的元素，所以

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

使用类.btn-delete查找按钮[type =“button”]。

Answer 3

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

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

LESS在DIV中隐藏第一个元素

3 个答案: