当它们位于不同的 div 中时，我如何为圆形输入设置标签样式？

Question

我有一个容器用于存放多张照片，以及带有标签的无线电输入。我需要将它们放在 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 中。你能解释一下如何为当前情况制作一个有效的选择器吗？

Answer 1

您可以使用如下所示的

:has()

选择器。

在这里您可以阅读更多相关信息。

.roomPhotosSlides:has(#Lux1:checked)~.sliderManual label:nth-child(1) {
  color: blue;
}
.roomPhotosSlides:has(#Lux2:checked)~.sliderManual label:nth-child(2) {
  color: red;
}

<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">Lux1</label>
    <label for="Lux2" class="manualButton">Lux2</label>
    <label for="Lux3" class="manualButton">Lux3</label>
    <label for="Lux4" class="manualButton">Lux4</label>
    <label for="Lux5" class="manualButton">Lux5</label>
  </div>

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

</div>