如何使适当的切换按钮的无线电输入?

Question

我试图在CSS中做一个切换按钮来改变计算器页面的主题，但是选择器只适用于第三个主题，当我选择第二个单选器时开始移动。

.form-choice {
#first:checked + .slider:before {
transform: translateX(0px);
background-color: red;
}
#second:checked + .slider:before {
transform: translateX(15px);
background-color: black;
}
#third:checked + .slider:before {
transform: translateX(45px);
background-color: yellow;
}
}

<div class="theme-selector">
<div id="theme-name">Theme</div>
<div class="theme-form">
<div class="form-name">
<label for="first">1</label>
<label for="second">2</label>
<label for="third">3</label>
</div>
<div class="form-choice">
<input type="radio" id="first" name="choice" />
<input type="radio" id="second" name="choice" />
<input type="radio" id="third" name="choice" />
<span class="slider"></span>
</div>
</div>
</div>

我希望滑动条根据选定的主题移动。

Answer 1

你在CSS中使用了错误的选择器。+选择器称为"相邻兄弟"选择器。它将只选择紧跟在第一个元素之后的第二个元素。

~是一个"一般同胞"选择器，并且不具有必须立即跟随第一个元素的相同条件。

试题:

#first:checked ~ .slider:before {
transform: translateX(0px);
background-color: red;
}
#second:checked ~ .slider:before {
transform: translateX(15px);
background-color: black;
}
#third:checked ~ .slider:before {
transform: translateX(45px);
background-color: yellow;
}