如何为选中的Radio按钮关联的嵌套Label设置样式？

当前问题的核心是Radio按钮和对应的Label不在同一父级，CSS无法通过Label的for属性反向关联Radio的选中状态。以下两种方案可实现需求：

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

把Radio按钮放到对应Label所在的<li>内部，让两者处于同级，就能用CSS伪类和相邻选择器直接控制样式：

修改后的HTML #

<ul class="flex-list">
  <li>
    <input id="tab-button-1" class="hide-radio" type="radio" name="radio-tabs" value="1" checked>
    <label for="tab-button-1" class="tab-button">Tab name 1</label>
  </li>
  <li>
    <input id="tab-button-2" class="hide-radio" type="radio" name="radio-tabs" value="2">
    <label for="tab-button-2" class="tab-button">Tab name 2</label>
  </li>
  <li>
    <input id="tab-button-3" class="hide-radio" type="radio" name="radio-tabs" value="3">
    <label for="tab-button-3" class="tab-button">Tab name 3</label>
  </li>
  <li>
    <input id="tab-button-4" class="hide-radio" type="radio" name="radio-tabs" value="4">
    <label for="tab-button-4" class="tab-button">Tab name 4 !!</label>
  </li>
</ul>

<article class="tabs-content">
  <section id="content-1" class="tab-section">
    Lorem Ipsum Here for tab 1
  </section>
  <section id="content-2" class="tab-section">
    Lorem Ipsum Here for tab 2
  </section>
  <section id="content-3" class="tab-section">
    Lorem Ipsum Here for tab 3
  </section>
  <section id="content-4" class="tab-section">
    Lorem Ipsum Here for tab 4
  </section>
</article>

对应的CSS #

/* 隐藏Radio按钮 */
.hide-radio {
  display: none;
}

/* 选中Radio对应的Label样式 */
.hide-radio:checked + .tab-button {
  color: #007bff;
  border-bottom: 2px solid #007bff;
  /* 可根据需求添加其他样式 */
}

方案二：不修改HTML结构（JavaScript辅助） #

如果不想调整DOM结构，通过监听Radio的change事件，动态给对应Label添加/移除样式类：

JavaScript代码 #

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

// 绑定change事件
radioTabs.forEach(radio => {
  radio.addEventListener('change', () => {
    // 移除所有Label的激活类
    document.querySelectorAll('.tab-button').forEach(label => {
      label.classList.remove('active-tab');
    });
    // 给当前选中Radio对应的Label添加激活类
    const targetLabel = document.querySelector(`label[for="${radio.id}"]`);
    targetLabel?.classList.add('active-tab');
  });
});

// 页面加载时初始化激活状态
document.querySelector('input[name="radio-tabs"]:checked').dispatchEvent(new Event('change'));

对应的CSS #

.hide-radio {
  display: none;
}

/* Label激活样式 */
.active-tab {
  color: #007bff;
  border-bottom: 2px solid #007bff;
}

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