勾选div内复选框时隐藏另一div中指定元素的实现方案咨询

你原有CSS失效的原因是CSS原生选择器暂不支持跨父级容器选中其他节点元素，之前生效的写法依赖相邻兄弟选择器+，要求两个元素必须在同一父级下。以下两种方案都可以保留你现有的HTML结构不变实现需求：

方案1：使用CSS :has() 选择器（现代浏览器兼容） #

直接替换原有CSS即可，原理是选中包含勾选状态复选框的div的相邻兄弟div内的目标元素：

div:has(> #check_box[type=checkbox]:checked) + div > #pop_hidden {
  display: none;
}

该方案支持Chrome 105+、Firefox 121+、Safari 15.4+版本，需要兼容更低版本浏览器可使用JS方案

方案2：使用JavaScript实现（全版本兼容） #

在页面底部添加如下JS代码，监听复选框的选中状态动态切换label的显示属性：

const checkBox = document.getElementById('check_box');
const popHidden = document.getElementById('pop_hidden');

checkBox.addEventListener('change', function() {
  popHidden.style.display = this.checked ? 'none' : 'block';
});

如果需要更灵活的样式控制，也可以用切换类名的方式实现：
先补充CSS样式：

.pop-hidden {
  display: none;
}

JS代码改为：

const checkBox = document.getElementById('check_box');
const popHidden = document.getElementById('pop_hidden');

checkBox.addEventListener('change', function() {
  popHidden.classList.toggle('pop-hidden', this.checked);
});

内容的提问来源于stack exchange，提问作者SK Md Sahaba Hossain Billal