使用:checked选择器修改.table_wrapper背景色失效，求助排查

嘿，我来帮你分析下为啥你的选择器没生效，以及怎么修复它：

问题根源 #

你用的~（通用兄弟选择器）有个关键限制：它只能选择和当前元素处于同一父级、且在它之后的同级元素。

看你的HTML结构：

<li class="nav-item">
  <div class="switch_box box_1">
    <input type="checkbox" class="switch_1">
  </div>
</li>
<div class="table_wrapper"></div>

.switch_1的父级是.switch_box，再往上是<li>，而.table_wrapper是和<li>同级的元素——根本不是.switch_1的同级，所以这个选择器自然匹配不到目标。

解决方案 #

方案1：调整HTML结构（最稳定推荐）

把.switch_1和.table_wrapper改成同级元素，这样兄弟选择器就能正常工作了。比如调整成这样：

<!-- 把checkbox移到和table_wrapper同一父级下 -->
<div class="nav-container">
  <li class="nav-item">
    <div class="switch_box box_1"></div>
  </li>
  <input type="checkbox" class="switch_1">
  <div class="table_wrapper"></div>
</div>

或者如果导航结构允许，直接把.switch_box放在<li>外面，和.table_wrapper同级：

<div class="nav-container">
  <div class="switch_box box_1">
    <input type="checkbox" class="switch_1">
  </div>
  <li class="nav-item"></li>
  <div class="table_wrapper"></div>
</div>

这时你原来的CSS代码就能正常生效了：

.switch_1:checked~.table_wrapper { 
  background: black; 
}

方案2：用JavaScript实现（无需改HTML）

如果没法调整HTML结构，CSS本身没有「父选择器」能让你从子元素.switch_1向上选中<li>，再选择同级的.table_wrapper。这时候用JS监听复选框状态变化就很靠谱：

// 获取元素
const toggleSwitch = document.querySelector('.switch_1');
const targetTable = document.querySelector('.table_wrapper');

// 监听复选框切换事件
toggleSwitch.addEventListener('change', function() {
  if (this.checked) {
    targetTable.style.backgroundColor = 'black';
  } else {
    // 取消选中时恢复默认样式
    targetTable.style.backgroundColor = '';
  }
});

方案3：用CSS :has选择器（现代浏览器适用）

如果你的项目只需要兼容现代浏览器（Chrome 101+、Firefox 121+等），可以用:has()伪类来绕过结构限制：

/* 选中包含已勾选.switch_1的.nav-item，再选择它后面的.table_wrapper */
.nav-item:has(.switch_1:checked) ~ .table_wrapper {
  background: black;
}

这个方法不用改HTML，但要注意旧浏览器不支持，需要确认项目的兼容性要求。

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