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

这是因为你的选择器.number: checked + .label 在您的 html 代码中，输入在标签之后，但在您的 css 中，您问的是相反的

<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>
    </div>
</div>

Answer 2

仅当紧接第一个元素后，adjacent sibling combinator (+) 才会 select 兄弟。

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

.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>

CSS- 单选按钮索引有问题

CSS- Something is wrong with radio button indexes

html

css

radio-button

css-transitions