有没有另一种方法来使用这些css样式，尤其是焦点答案

【问题标题】：Is there another way to use these css styles, especially focus有没有另一种方法来使用这些css样式，尤其是焦点
【发布时间】：2014-10-08 13:15:46
【问题描述】：

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

【问题讨论】：

@Michael 只是因为 OP 的英语不是最好的，这并不意味着你应该嘲笑他/她。如果您真的想提供帮助，请将代码粘贴到小提琴中

标签： html css

【解决方案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

【讨论】：

这可行，但我不想只更改标题，我想更改 div 背景。像这样link

【解决方案2】：

http://jsfiddle.net/ecb86gLw/

使用 :checked

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

【讨论】：