如何为不同div中单选框的选中关联标签设置CSS样式？

你遇到的核心问题没错：当单选框和对应标签不在同一个父元素里时，纯CSS选择器无法直接关联两者——因为CSS的兄弟选择器（+/~）只能选择同一父容器下的后续元素，跨div的关联选择在CSS里做不到。下面给你两个可行的解决方案：

方案1：调整HTML结构（推荐，纯CSS实现） #

把单选框和对应标签放进同一个小容器里，然后通过布局技巧（比如Flex/Grid）保持你需要的对齐效果，这样就能用相邻兄弟选择器实现样式关联：

示例代码 #

<!-- 每个单选框+标签放在单独的容器里 -->
<div class="radio-item">
  <input type="radio" id="Lux1" name="room-photos" class="room-radio">
  <label for="Lux1" class="manualButton">1</label>
</div>
<div class="radio-item">
  <input type="radio" id="Lux2" name="room-photos" class="room-radio">
  <label for="Lux2" class="manualButton">2</label>
</div>
<!-- 更多单选框组 -->

/* 隐藏原生单选框（可选，根据你的需求） */
.room-radio {
  position: absolute;
  opacity: 0;
}

/* 选中单选框时，给对应标签加样式 */
.room-radio:checked + .manualButton {
  background-color: blue;
  color: white;
}

/* 用Flex布局让标签对齐（根据你的实际布局调整） */
.radio-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

这种方式不需要JS，完全靠CSS就能实现，而且结构更清晰，符合语义化要求。

方案2：用JavaScript处理（不修改现有结构） #

如果必须保持单选框和标签在不同div里，只能通过JS监听单选框的状态变化，给对应标签添加/移除样式类：

示例代码 #

<!-- 单选框容器 -->
<div class="radio-container">
  <input type="radio" id="Lux1" name="room-photos" class="room-radio" checked>
  <input type="radio" id="Lux2" name="room-photos" class="room-radio">
</div>

<!-- 标签容器 -->
<div class="label-container">
  <label for="Lux1" class="manualButton">1</label>
  <label for="Lux2" class="manualButton">2</label>
</div>

/* 定义选中状态的样式类 */
.manualButton.active {
  background-color: blue;
  color: white;
}

// 获取所有单选框和标签
const radios = document.querySelectorAll('.room-radio');
const labels = document.querySelectorAll('.manualButton');

// 初始化：给默认选中的单选框对应标签加样式
radios.forEach(radio => {
  if (radio.checked) {
    document.querySelector(`label[for="${radio.id}"]`).classList.add('active');
  }
});

// 监听单选框切换事件
radios.forEach(radio => {
  radio.addEventListener('change', () => {
    // 先移除所有标签的选中样式
    labels.forEach(label => label.classList.remove('active'));
    // 给当前选中的单选框对应标签加样式
    document.querySelector(`label[for="${radio.id}"]`).classList.add('active');
  });
});

这个方案不需要修改现有HTML结构，通过JS完成状态关联，适合无法调整结构的场景。

内容的提问来源于stack exchange，提问作者Maks111