是否有其他方法可以使用这些css样式，特别是焦点

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