如何在radio:checked时修改非同级label的CSS属性？

问题分析 #

CSS选择器仅能在当前元素的后代、同级后续元素范围内匹配目标。你的Radio按钮位于.sliderContainer容器内，对应的Label却在独立的.navigation容器中，属于不同父级元素，因此~、+这类同级选择器完全无法生效，纯CSS无法直接实现跨容器的样式联动。

可行方案 #

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

通过调整DOM层级，让Radio和Label处于CSS选择器可关联的范围内：

方式A：将导航容器与Radio容器设为同级

<div class="sliderContainer">
  <div class="slides">
      <input type="radio" name="radio-btn" id="radio1" checked>
      <input type="radio" name="radio-btn" id="radio2">
      <input type="radio" name="radio-btn" id="radio3">
  </div>
  <!-- 将navigation移入sliderContainer，与slides同级 -->
  <div class="navigation">
      <label for="radio1" class="btnbar" id="label1"></label>
      <label for="radio2" class="btnbar" id="label2"></label>
      <label for="radio3" class="btnbar" id="label3"></label>
  </div>
</div>

对应的CSS代码：

#radio1:checked ~ .navigation #label1 {
    background: #6ab534;
}
#radio2:checked ~ .navigation #label2 {
    background: #6ab534;
}
#radio3:checked ~ .navigation #label3 {
    background: #6ab534;
}

方式B：将每个Radio与对应Label分组

<div class="sliderContainer">
  <div class="slide-item">
      <input type="radio" name="radio-btn" id="radio1" checked>
      <label for="radio1" class="btnbar" id="label1"></label>
  </div>
  <div class="slide-item">
      <input type="radio" name="radio-btn" id="radio2">
      <label for="radio2" class="btnbar" id="label2"></label>
  </div>
  <div class="slide-item">
      <input type="radio" name="radio-btn" id="radio3">
      <label for="radio3" class="btnbar" id="label3"></label>
  </div>
</div>

对应的CSS代码（更简洁）：

.slide-item input:checked + .btnbar {
    background: #6ab534;
}

方案2：JavaScript实现（不修改原有HTML结构） #

如果无法调整DOM结构，可通过监听Radio的change事件动态修改Label样式：

// 获取所有radio按钮
const radios = document.querySelectorAll('input[name="radio-btn"]');

// 绑定change事件
radios.forEach(radio => {
    radio.addEventListener('change', function() {
        // 重置所有label的背景样式
        document.querySelectorAll('.btnbar').forEach(label => {
            label.style.background = '';
        });
        // 给当前选中radio对应的label设置样式
        const targetLabel = document.querySelector(`label[for="${this.id}"]`);
        if (targetLabel) targetLabel.style.background = '#6ab534';
    });
});

// 页面加载时初始化选中状态的label样式
const checkedRadio = document.querySelector('input[name="radio-btn"]:checked');
if (checkedRadio) {
    const targetLabel = document.querySelector(`label[for="${checkedRadio.id}"]`);
    if (targetLabel) targetLabel.style.background = '#6ab534';
}

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