如何不使用:has()伪类实现点击按钮隐藏DIV消息框？

下面提供几种无需依赖:has()伪类的实现方式，兼容性覆盖绝大多数主流浏览器：

方案1：纯CSS实现（调整DOM结构） #

通过将状态复选框移到通知框同级位置，利用CSS兄弟选择器实现状态关联，无需JavaScript：

HTML结构 #

<!-- 复选框作为通知框的同级元素，用ID关联关闭按钮 -->
<input type="checkbox" class="closeflag" id="msg-close">
<div class="msgbox">
  <p>这是一条通知消息</p>
  <!-- 用label触发复选框状态变化 -->
  <label for="msg-close" class="close-btn">×</label>
</div>

CSS代码 #

/* 隐藏原生复选框 */
.closeflag {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 复选框选中时，隐藏同级的.msgbox */
.closeflag:checked ~ .msgbox {
  display: none;
}

/* 可选：给关闭按钮加样式 */
.close-btn {
  cursor: pointer;
  float: right;
  font-size: 1.2em;
  margin-left: 1em;
}

方案2：JavaScript直接控制样式 #

兼容性最好的方案，无需调整DOM结构，通过JS监听点击事件直接修改通知框的显示状态：

HTML结构 #

<div class="msgbox">
  <p>这是一条警告消息</p>
  <button class="close-btn">关闭</button>
</div>

JavaScript代码 #

// 绑定所有关闭按钮的点击事件
document.querySelectorAll('.close-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 找到最近的.msgbox父元素并隐藏
    this.closest('.msgbox').style.display = 'none';
    
    // 可选：持久化关闭状态，页面刷新后保持隐藏
    // localStorage.setItem('msgbox_closed', 'true');
  });
});

// 可选：页面加载时检查持久化状态
// window.addEventListener('load', function() {
//   if (localStorage.getItem('msgbox_closed') === 'true') {
//     document.querySelector('.msgbox').style.display = 'none';
//   }
// });

方案3：JS+CSS类切换（样式与逻辑分离） #

将隐藏逻辑写在CSS类中，JS仅负责切换类名，更易维护：

HTML结构 #

<div class="msgbox">
  <p>这是一条错误消息</p>
  <button class="close-btn">关闭</button>
</div>

CSS代码 #

/* 定义隐藏类 */
.msgbox.hidden {
  display: none;
}

JavaScript代码 #

document.querySelectorAll('.close-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    this.closest('.msgbox').classList.add('hidden');
    
    // 可选：持久化状态
    // localStorage.setItem('msgbox_closed', 'true');
  });
});

// 可选：初始化时恢复状态
// window.addEventListener('load', function() {
//   if (localStorage.getItem('msgbox_closed')) {
//     document.querySelector('.msgbox').classList.add('hidden');
//   }
// });

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