我试图在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>

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