我有一个多张照片的容器，和标签的无线电输入。我需要把他们在div的风格和照片容器对齐。

#Lux1:checked~.mainPhoto {
  margin-left: 0;
}

#Lux2:checked~.mainPhoto {
  margin-left: -40rem;
}

<div class="roomPhotos">
  <div class="roomPhotosSlides">
    <input type="radio" name="radioButton" id="Lux1" />
    <input type="radio" name="radioButton" id="Lux2" />
    <input type="radio" name="radioButton" id="Lux3" />
    <input type="radio" name="radioButton" id="Lux4" />
    <input type="radio" name="radioButton" id="Lux5" />

    <picture class="roomPhoto mainPhoto">
      <img src="Rooms/Lux/Lux1.jpg" alt="Lux" />
    </picture>
    <picture class="roomPhoto">
      <img src="Rooms/Lux/Lux2.jpg" alt="Lux" />
    </picture>
    <picture class="roomPhoto">
      <img src="Rooms/Lux/Lux3.jpg" alt="Lux" />
    </picture>
    <picture class="roomPhoto">
      <img src="Rooms/Lux/Lux4.jpg" alt="Lux" />
    </picture>
    <picture class="roomPhoto">
      <img src="Rooms/Lux/Lux5.jpg" alt="Lux" />
    </picture>

  </div>
  <div class="sliderManual">
    <label for="Lux1" class="manualButton"></label>
    <label for="Lux2" class="manualButton"></label>
    <label for="Lux3" class="manualButton"></label>
    <label for="Lux4" class="manualButton"></label>
    <label for="Lux5" class="manualButton"></label>
  </div>

  <figure class="leftScroll" id="luxLeft">
    <div class="arrowLeft"></div>
  </figure>
  <figure class="rightScroll" id="luxRight">
    <div class="arrowRight"></div>
  </figure>

</div>

我用CSS在照片之间切换（取决于输入检查），我将图像行向左移动到一张照片的宽度;我也有一个功能，改变输入检查到左边或右边，或者我可以只是手动检查输入选择其中一张照片。

问题是如何设置所选标签的样式。仅当前处于活动状态的一个。由于某种原因，我真的找不到合适的选择器。

.manualButton:checked {
  background: blue;
}

不起作用

.roomPhotosSlides input[type="radio"]:checked+label {
  background-color: blue;
}

我发现其他的答案也不起作用。

#Lux1:checked ~ .manualButton {
  background: blue;
}

像这样的东西。
我认为主要的问题是我的标签在不同的div中。你能解释一下我如何为当前的情况做一个工作选择器吗？