Question

我的css焦点代码存在一些问题。我想在选择类时更改背景颜色，但是当我单击时，它会更改颜色，但它不会保持更改。它就像hover一样消失并出现。

CSS代码

.reward:focus, 
.reward:active,
div.reward a:focus,
div.reward a:active,
.reward:focus .rdesc,
.reward:active .rdesc,
.reward:focus .rnumb,
.reward:active .rnumb,
.reward:focus .rnumbi, 
.reward:active .numbi,
.reward:focus .rtitle,
.reward:active .rtitle
{  
    background:yellow;   
}

HTML代码

<div class="cfrewards">
    <div class="reward_title pull-center">title</div>
    <div class="reward">
        <a href="javascript: void(0);" class="reward-amount">
            <span class="ramount">
                <input type="radio" name="reward" value="3" data-id="97" class="reward-amount-radio" />
                description
            </span>
            <span class="rtitle">title</span>
            <span class="rdesc">description</span>
        </a>
    </div>
</div>

Answer 1

我建议像

<input type="radio" name="reward" value="3" id="reward-amount-radio" />
<label for="reward-amount-radio">
    description
    <span class="rtitle">title</span>
    <span class="rdesc">description</span>
</label>

#reward-amount-radio {
    float: left;
}
#reward-amount-radio + label {  
    display: block;
}
#reward-amount-radio:checked + label {  
    background:yellow;
}

Demo

Answer 2

http://jsfiddle.net/ecb86gLw/

使用：已选中

input[type=radio]:checked + label {
background:yellow;   
}

有没有其他方法来使用这些CSS样式，尤其是焦点

2 个答案: