在选择收音机的图像之间切换

Question

说明

我想在选择收音机的图像之间切换，但我希望它仅是HTML / CSS。正如您在下面的代码中看到的那样，它确实起作用，但是在我的主要代码中，单选按钮和图像位于它们自己的divs之内，因此该代码将不起作用，因为~仅起作用如果.radio-image之前紧跟input.radio3:checked；同样在我的主代码中，图像位于单选按钮之前。
我还在主代码中写了一个例子。

代码

工作代码

input.radio1:checked~.image1 {
  display: block;
}
input.radio1:checked~.image2 {
  display: none;
}
input.radio1:checked~.image3 {
  display: none;
}

input.radio2:checked~.image2 {
  display: block;
}
input.radio2:checked~.image1 {
  display: none;
}
input.radio2:checked~.image3 {
  display: none;
}

input.radio3:checked~.image3 {
  display: block;
}
input.radio3:checked~.image1 {
  display: none;
}
input.radio3:checked~.image2 {
  display: none;
}

<input type="radio" name="test" class="radio1" checked/>
<input type="radio" name="test" class="radio2" />
<input type="radio" name="test" class="radio3" />


<div class="image1">
  <img src="http://placehold.it/50x50">
</div>
<div class="image2">
  <img src="http://placehold.it/75x75">
</div>
<div class="image3">
  <img src="http://placehold.it/100x100">
</div>

主要代码示例

input.radio1:checked~.image1 {
  display: block;
}

input.radio1:checked~.image2 {
  display: none;
}

input.radio1:checked~.image3 {
  display: none;
}

input.radio2:checked~.image2 {
  display: block;
}

input.radio2:checked~.image1 {
  display: none;
}

input.radio2:checked~.image3 {
  display: none;
}

input.radio3:checked~.image3 {
  display: block;
}

input.radio3:checked~.image1 {
  display: none;
}

input.radio3:checked~.image2 {
  display: none;
}

<section class="testSection">

  <div class="firstDiv">
    <div class="image1">
      <img src="http://placehold.it/50x50">
    </div>
    <div class="image2">
      <img src="http://placehold.it/75x75">
    </div>
    <div class="image3">
      <img src="http://placehold.it/100x100">
    </div>
  </div>

  <div class="secondDiv">
    <form class="testForm">
      <div class="thirdDiv">
        <div class="inputDiv">
          <input type="radio" name="test" class="radio1" checked />
        </div>
        <div class="inputDiv">
          <input type="radio" name="test" class="radio2" />
        </div>
        <div class="inputDiv">
          <input type="radio" name="test" class="radio3" />
        </div>
      </div>
    </form>
  </div>

</section>

先谢谢了，
路易斯。