无法隐藏相邻的单选按钮

Question

我只使用超文本标记语言和CSS，没有使用JavaScript。最初的代码应该只显示第一个单选按钮与它的标签，如果用户点击它，第二个单选按钮和第二个标签应该出现，第一个应该消失等。我不知道如何实现这个结果。我想问题出在标签的位置上。我不知道如何编写css样式来完成此任务。你能告诉我如何解决这个问题吗？代码：

<div>
    <label for="radio-1" class="label-1"> <input type="radio" id="radio-1" name="group"> </label>
    <label for="radio-2" class="label-2"> <input type="radio" id="radio-2" name="group"> </label>
    <label for="radio-3" class="label-3"> <input type="radio" id="radio-3" name="group"> </label>
</div>

Answer 1

我的想法是隐藏所有输入和标签，除了紧跟在选中输入之后的输入和标签(使用兄弟选择器+)。为了让它工作，我添加了一个隐藏的选中无线电在所有其他无线电之前。根据这个问题，如果检查了最后一个输入，将会发生什么情况还不清楚。

​

input,
label {
  display: none;
}

input:checked + label + input,
input:checked + label + input + label {
  display: inline;
}

<div>
  <input type="radio" name="group" checked hidden><label hidden></label>
  <input type="radio" id="radio-1" name="group"><label for="radio-1" class="label-1">Label 1</label>
  <input type="radio" id="radio-2" name="group"><label for="radio-2" class="label-2">Label 2</label>
  <input type="radio" id="radio-3" name="group"><label for="radio-3" class="label-3">Label 3</label>
</div>

​