表示要素ラジオがチェックされているとき

Question

がちょうどinput[type=radio]は、HTMLコード

をチェックされているときに表示するp要素をしよう：

<div class="form-group checkbox"> 
    <input type="radio" id="pago-deposito" name="[transaccion]pago"/> 
    <label for="pago-deposito">check1</label> 
    <p id="pago-hint"> 
     //hints 
    </p> 
</div> 

私はそう

.checkbox > input#pago-deposito[type=radio]:checked + p#pago-hint{ 
    display: block; 
} 

#pago-hint{ 
    display: none; 
    line-height: 40px; 
} 

を試してみましたCSSそれは、私は別の場所で同じメソッドを実装し、それは動作します、私はちょうどなぜこの1つではないか分からない

Answer 1

はあなたではなく、すぐにあなたのラジオボタンに従っていませんadjacent sibling selector(+)#pago-hintとしてよりもgeneral sibling selector (~)を使用する必要があります。

.checkbox > input#pago-deposito[type=radio]:checked ~ p#pago-hint{ 
 
    display: block; 
 
} 
 

 
#pago-hint{ 
 
    display: none; 
 
    line-height: 40px; 
 
}

<div class="form-group checkbox"> 
 
    <input type="radio" id="pago-deposito" name="[transaccion]pago"/> 
 
    <label for="pago-deposito">check1</label> 
 
    <p id="pago-hint"> 
 
     //hints 
 
    </p> 
 
</div>