CSS-单选按钮索引出了点问题

Question

单选按钮选择有一点问题。我希望按钮选择能够正常工作，因为我没有做任何事情来篡改按钮的索引。我不知道为什么，但是，按下按钮前面的按钮而不是按下按钮本身被选中。好像按钮的索引都搞砸了。请运行下面的代码段，看看是否可以将我指向正确的方向。

.frame{
  background-color:#406bd8;
  display:flex;
  width:600px;
  justify-content:center;
  align-items:center;
  height:200px;
  margin:0 auto;
}

.radio-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0;
  width:40%
}

.label{
  display:inline-block;
  border:1px solid #eee;
  padding:1em;
  border-radius:100%;
  width:1em;
  height:1em;
  text-align:center;
  cursor:pointer;
  color:#eee;
  position:relative;
  z-index:1;
}
.label:hover{
  background-color:#658ae8;
}
.label:before{
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  background-color:#eee;
  border-radius:inherit;
  top:0;
  left:0;
  transform:scale(0);
  transition:transform .5s ease-in-out;
  transition-origin:center;
  z-index:-1;
}

.number{
  opacity:0;
  position:fixed;
  width:0;
}


.number:checked+.label{
  color:#406bd8;
}

.number:checked+.label:before{
  transform:scale(1);
}

  
  <div class="frame">
    <div class="radio-bar">  
 
<label for='input1' class='label'>1</label>
<input type='radio' name='radios' id='input1' class="number" checked>
    
<label for='input2' class='label'> 2</label>
 <input type='radio' name='radios' id='input2' class="number">
  
<label for="input3" class='label'>3</label>
<input type='radio' name='radios' id='input3'class="number">
  
<label for="input4" class='label'>4</label>
<input type='radio' name='radios' id='input4'class="number">

    </div>
  </div>

Answer 1

adjacent sibling combinator (+)仅在紧接之后第一个元素时才选择同级。”>

为了解决您的问题，请重新排列元素的顺序，以使输入在标签之前：

.frame{
  background-color:#406bd8;
  display:flex;
  width:600px;
  justify-content:center;
  align-items:center;
  height:200px;
  margin:0 auto;
}

.radio-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0;
  width:40%
}

.label{
  display:inline-block;
  border:1px solid #eee;
  padding:1em;
  border-radius:100%;
  width:1em;
  height:1em;
  text-align:center;
  cursor:pointer;
  color:#eee;
  position:relative;
  z-index:1;
}
.label:hover{
  background-color:#658ae8;
}
.label:before{
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  background-color:#eee;
  border-radius:inherit;
  top:0;
  left:0;
  transform:scale(0);
  transition:transform .5s ease-in-out;
  transition-origin:center;
  z-index:-1;
}

.number{
  opacity:0;
  position:fixed;
  width:0;
}


.number:checked+.label{
  color:#406bd8;
}

.number:checked+.label:before{
  transform:scale(1);
}
<div class="frame">
    <div class="radio-bar">  
 
    <input type='radio' name='radios' id='input1' class="number" checked>
    <label for='input1' class='label'>1</label>

     <input type='radio' name='radios' id='input2' class="number">
    <label for='input2' class='label'> 2</label>

    <input type='radio' name='radios' id='input3'class="number">
    <label for="input3" class='label'>3</label>

    <input type='radio' name='radios' id='input4'class="number">
    <label for="input4" class='label'>4</label>

    </div>
  </div>

Answer 2

是由于选择器.number: checked + .label在您的html代码中，输入是在标签之后，但在CSS中，您会询问相反的内容