CSS选择器作用域

我想知道是否可以根据选中的单选按钮显示div，而不使用Jquery，只使用纯css。问题是我不确定我是否能克服为它定义的范围。这是我为它写的一个模型

    <div class="tester">
<input type="radio" name="chk" class="chkbox chkbox1" id="chk1" checked/>
<label for="chk1">Paypal</label>
<input type="radio" name="chk" class="chkbox chkbox2" id="chk2" />
<label for="chk2">Braintree</label>
<input type="radio" name="chk" class="chkbox chkbox3" id="chk3" />
<label for="chk3">Du</label>
  </div>
<div class="test">
  <div id="chkbox1" class="box">Paypal</div>
  <div id="chkbox2" class="box">Braintree</div>
  <div id="chkbox3" class="box">Du</div>
 </div>
</div>
<div class="test">
<div id="chkbox1" class="box"> Paypal </div>
<div id="chkbox2" class="box"> Braintree </div>
<div id="chkbox3" class="box"> Du </div>
  </div>
</div>

有什么想法吗

---

jsiddle for it

.test

和

.checkbox

不是兄弟姐妹，因此

~

不起作用。您需要从.tester打开单选按钮，它就会起作用。如果不打开，这是不可能的吗？仅使用css，我不这么认为：（如果可以将

chkbox

元素放入

.tester

div中，则可以稍微修改CSS以获得所需的效果。

.box{
    border: 2px solid #ccc;
    padding:20px;
    margin:20px 0 0;
    max-height:150px;
    max-width:300px;
    display:none /* By Default the box is hidden */        
}

.chkbox1:checked ~ .test > #chkbox1, 
.chkbox2:checked ~ .test > #chkbox2,
.chkbox3:checked ~ .test > #chkbox3 {
    display: block
}