html - 选中 radio 时显示元素

Question

只是想制作一个 p 元素来显示 input[type=radio] 被选中

html代码:

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

我试过的CSS

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

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

就是这样，我在不同的地方实现了相同的方法并且有效，我只是不知道为什么这个没有

Answer 1

您需要使用 general sibling selector (~)而不是 adjacent sibling selector(+)因为 #pago-hint 不会立即跟随您的单选按钮:

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