DESSのクラスで最初の要素を非表示

Question

私は現在、LESSを使用してボタンを隠そうとしています。

<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> 

問題：私のHTMLは次のように見える、私は "ターゲット" のdivに "ターゲット" のdivを追加するためのjQueryを使用して、HTMLは、DOM操作の後に次のようになります。

<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コーディングが動作しません。

この問題を解決する方法を知っていますか？したがって、最初の.btn-deleteボタンをLESS Cssで非表示にするにはどうすればよいですか？

ありがとうございます！ :)

あなたは btn-deleteクラスでボタンをターゲットにしていると

Answer 1

こんにちは、それは `ボタン[タイプは=「ボタン」]すべきだと思います。あなたのコードがあなたと子供を持っているボタンを持っていると言うので、` {BTN-削除適切

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

Answer 2

は、あなたは、伝統的な方法&オペレータ

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

ORが必要

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

Answer 3

そのクラスを持つ要素への可視性を適用しますボタンの内側にあるので

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

ボタン[type = "button"]をクラス.btn-deleteで探します。