关于单选框的css和css控制显隐

   <label class="edf-line" for="z">
                    <input type="radio" name="pay-radio" value="2" id="z" class="st-one">
                    <i class="checkbox_ico"></i>
                    <span><span class="zhi_zheng"><img src="/images/weixinpay.png"></span>微信支付</span>
                </label>

注意label的for和input 的id

这样在点击图片的时候就可以触发到input的单选
非常实用
改变logo的样式可以

.edf-line>input:checked~.checkbox_ico:before {
    -webkit-transform: scale(1);
    transform: scale(1);
}
input:checked~.checkbox_ico:before   这个有意思 它可以单独对选时的元素进行修改 也是很有用的 同样  我们可以通过hover来控制显示和隐藏

.module .recharge-block > .set > h1 > .titles {
    display: none;
}
.module .recharge-block > .set > h1 > label:hover + .titles {
    display: inline-block;
}

这样也是非常好用的 +的作用是临近选择元素 选择最近的一个类名

鼠标移到加号能显示这段话