css - 单选按钮选中效果单个外部元素

Question

一个简单的问题，CSS 单选按钮可以影响它所在的​​元素之外的东西。

例如:

<div class="radio">
      <input id="radio-green" type="radio" name="radio-b"/>
      <label for="radio-green">Green</label>

      <input id="radio-blue" type="radio" name="radio-b" checked />
      <label for="radio-blue">Blue</label>

      <input id="radio-yellow" type="radio" name="radio-b"/>
      <label for="radio-yellow">Yellow</label>

      <input id="radio-red" type="radio" name="radio-b"/>
      <label for="radio-red">Red</label>

      <input id="radio-white" type="radio" name="radio-b"/>
      <label for="radio-white">White</label>
</div>

<div class="square"></div>

CSS 是这样的吗？

.square {
width:300px;
height:300px;
margin:0 auto;
background:red;
}
input#radio-green:checked .square {background:green;}

或者我需要使用 JS 吗？

这是一个 JS fiddle http://jsfiddle.net/m8fxw/

谢谢

Answer 1

如果他们不在他们的 parent 里面<div>你可以做到，因为他们是 sibling 。不幸的是，CSS 规则不允许您遍历树。

如果你把它们拿出来 <div class="radio">那么你可以使用 ~兄弟组合器:

#radio-green:checked ~ .square {background:green;}

Demo

否则，我可能会使用 JS 将类添加到 <div class="radio>当每个 radio 被点击时，然后相应地设置正方形的样式。