选中无线电时显示元素

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

您需要使用通用兄弟选择器(~)而不是相邻的兄弟选择器(+),因为#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>