CSS自定义单选按钮不起作用

Question

我正在使用CSS制作一个简单的自定义单选按钮，但我不知道为什么它不能像普通的单选按钮一样工作。当我选择一个时，另一个也会自己选择（？）。

/* Radio Button */

.radioBtn{
   float: right;
   margin-top: 30px;
   height: 35px;
   width: 35px;
   border: solid 3px #d8aa00;
   border-radius: 50%;
   background: #fffbd8;
   position: relative;
   transition: .3s;
}


.radioBtn::after{
   position: absolute;
   width: 20px;
   height: 20px;
   background: #d8aa00;
   border-radius: 50%;
   content: '';
   top: 7px;
   left: 7px;
   opacity: 0;
   transition: .3s;
}

input[type=radio]:checked ~ .radioBtn::after {
   opacity: 1;
 }

 input[type=radio]{
    display: none;
 }

<input id="radioBtn" type="radio" name="test">
<label class="radioBtn" for="radioBtn"></label>

<input id="radioBtn2" type="radio" name="test">
<label class="radioBtn" for="radioBtn2"></label>

Answer 1

使用+而非~来定位仅紧随其后的兄弟姐妹，而不是全部。

  

+组合器选择相邻兄弟姐妹。这意味着第二   元素紧随第一个元素，并且它们共享同一个父元素。 ^ref

---

  

〜组合器选择同级。这意味着第二个元素   跟随第一个 （尽管不一定立即），并且两者都共享   相同的父母 ^ref

/* Radio Button */

.radioBtn{
   float: right;
   margin-top: 30px;
   height: 35px;
   width: 35px;
   border: solid 3px #d8aa00;
   border-radius: 50%;
   background: #fffbd8;
   position: relative;
   transition: .3s;
}


.radioBtn::after{
   position: absolute;
   width: 20px;
   height: 20px;
   background: #d8aa00;
   border-radius: 50%;
   content: '';
   top: 7px;
   left: 7px;
   opacity: 0;
   transition: .3s;
}

input[type=radio]:checked + .radioBtn::after {
   opacity: 1;
 }

 input[type=radio]{
    display: none;
 }

<input id="radioBtn" type="radio" name="test">
<label class="radioBtn" for="radioBtn"></label>

<input id="radioBtn2" type="radio" name="test">
<label class="radioBtn" for="radioBtn2"></label>