CSS :has()选择器替代方案咨询：复选框选中时切换滑块样式

先看你给出的原始HTML结构：

<label class="switch">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" />
    <label class="form-check-label form-label"></label>
  </div>
  <span class="switch__slider switch__round"></span>
</label>

你原本想用:has()选择器实现需求，但它兼容性不佳，这里给你两个靠谱的替代思路：

思路一：调整DOM结构，纯CSS实现 #

核心是让复选框和滑块元素处于可通过CSS相邻兄弟选择器关联的层级。把<input>移到.form-check外面，和.switch__slider处于同一父容器下，就能用:checked结合相邻兄弟选择器控制样式：

修改后的HTML：

<label class="switch">
  <input class="form-check-input" type="checkbox" />
  <div class="form-check">
    <label class="form-check-label form-label"></label>
  </div>
  <span class="switch__slider switch__round"></span>
</label>

对应的CSS：

/* 复选框选中时，选中它后面的.form-check之后的滑块 */
.switch .form-check-input:checked + .form-check + .switch__slider {
    background-color: #2196F3; 
}

这种方案完全用CSS实现，兼容性拉满，不需要额外JS。

思路二：用JavaScript监听状态变化 #

如果不想改动DOM结构，就用JS监听复选框的change事件，动态调整滑块样式：

方法1：直接修改行内样式 #

// 获取所有目标复选框
const checkboxes = document.querySelectorAll('.form-check-input');

checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // 找到当前复选框所在.switch容器里的滑块
    const slider = this.closest('.switch').querySelector('.switch__slider');
    // 根据选中状态切换背景色
    slider.style.backgroundColor = this.checked ? '#2196F3' : '';
  });
});

方法2：通过类名控制样式（更推荐） #

先在CSS里定义选中状态的类：

.switch__slider.checked {
    background-color: #2196F3;
}

然后用JS切换类名：

const checkboxes = document.querySelectorAll('.form-check-input');

checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const slider = this.closest('.switch').querySelector('.switch__slider');
    this.checked ? slider.classList.add('checked') : slider.classList.remove('checked');
  });
});

这种方式把样式逻辑留在CSS里，JS只负责状态切换，代码更易维护。

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