如何选中嵌套在div中的checkbox？保留div样式的解决方法

你遇到的核心问题不是checkbox本身无法选中，而是选中后控制.menu-items显示的CSS规则失效——原因是CSS的~（相邻兄弟选择器）只能作用于同一父级元素下的后续兄弟节点。

当你把checkbox和label放进.event-listener div后，.menu-items要么是这个div的兄弟，要么在更外层，原CSS里的.event-listener input:checked ~ .menu-items根本找不到目标元素，所以样式不会触发。

下面给你几种可行的解决方法：

方法1：用CSS :has()选择器（现代浏览器推荐） #

如果.menu-items是.event-listener的兄弟元素，直接用:has()检测子元素的选中状态，再选择兄弟节点：

/* 当.event-listener内部的checkbox被选中时，控制它的兄弟元素.menu-items */
.event-listener:has(input:checked) ~ .menu-items {
  visibility: visible;
  opacity: 1;
}

:has()是CSS新特性，目前Chrome、Firefox 121+、Safari都支持，适合不需要兼容老浏览器的场景。

方法2：调整HTML结构，让.menu-items和checkbox同属一个父级 #

如果可以修改结构，把.menu-items移到.event-listener内部，和checkbox同级：

<div class="event-listener">
  <input type="checkbox" id="checkbox" />
  <label for="checkbox">
    <i class="fa-solid fa-bars" style="color: #000000"></i>
  </label>
  <!-- 把menu-items移到这里 -->
  <div class="menu-items">菜单内容</div>
</div>

这时候你原来的CSS就能正常生效：

.event-listener input:checked ~ .menu-items {
  visibility: visible;
  opacity: 1;
}

方法3：用JavaScript控制（兼容所有浏览器） #

如果需要兼容老浏览器，或者不想修改结构，直接用JS监听checkbox的状态变化：

const checkbox = document.getElementById('checkbox');
const menuItems = document.querySelector('.menu-items');

checkbox.addEventListener('change', function() {
  if (this.checked) {
    menuItems.style.visibility = 'visible';
    menuItems.style.opacity = '1';
  } else {
    menuItems.style.visibility = 'hidden';
    menuItems.style.opacity = '0';
  }
});

另外补充：如果确实存在checkbox点击没反应的情况，检查.event-listener的CSS有没有设置pointer-events: none，这个属性会阻止所有点击事件，去掉就能恢复点击。

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