javascript - 在没有 js 的情况下选中单选按钮时突出显示 html 元素

Question

我想知道是否有一种方法可以在不使用 js 的情况下在选择单选按钮时修改 html 元素(即 div)。这是标记:

<div class="container">
    <input id="myRadioBtn" class="btn-radio" type="radio" name="name" value="value"/>
    <div class="box">BOX</div>
</div>

我希望“box”在选择“myRadioBtn”后更改其颜色。我知道我可以使用 js/jQuery，但如果可能的话，我只想用 CSS 来做。这可能吗？

Answer 1

#myRadioBtn:checked + .box {
    background-color:red;
}

http://jsfiddle.net/tyEys/

我无法检查它是否适用于 IE8。

编辑:您可以将 + 替换为 ~ 以仅选择紧跟在 radio 之后的 .box。因此，如果 radio 后有 2 个盒子，则第二个盒子不会受到影响。