display:flex与.hidden类冲突：折叠div不应显示却可见

问题描述 #

主页面包含“Add question”按钮，点击后预期页面顶部出现折叠div，同时在div与主页面之间显示遮罩层。但.hidden类（设置display:none）与折叠div的display:flex样式存在冲突，导致折叠div本应隐藏却始终可见。目前仅通过给.hidden添加!important能临时修复，但这属于不良代码实践，需寻找更优解决方案。

问题根源 #

CSS选择器优先级冲突：折叠div的布局样式通过ID选择器#add-question-collapsible-style定义（优先级权重100），而.hidden是类选择器（优先级权重10），优先级更低，因此display:flex会直接覆盖display:none，导致隐藏逻辑失效。

优化解决方案 #

方案1：提升.hidden选择器优先级 #

修改.hidden的CSS选择器，结合目标元素的ID，让其优先级超过单独的ID选择器：

#add-question-collapsible-style.hidden {
  display: none;
}

ID+类的组合优先级权重为110，高于单独的ID选择器，可有效覆盖display:flex样式，无需使用!important。

方案2：重构样式逻辑（更推荐） #

将折叠div的显示样式从ID移到独立类中，通过切换类控制显示/隐藏，从根源避免优先级冲突：

1. 修改CSS代码：

/* 保留基础隐藏类 */
.hidden {
  display: none;
}

/* 新增折叠div激活状态类 */
.add-question-collapsible.active {
  position: fixed;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 4rem;
  width: 100%;
  background-color: #000000b9;
  border-bottom: 0.1rem solid #000;
  padding: 2rem;
}

/* 移除原ID选择器中的布局样式 */
#add-question-collapsible-style {
  /* 仅保留非布局类样式（如有需要） */
}

2. 调整JavaScript逻辑：

btnTopbarAdd.addEventListener("click", () => {
  topbarNav.classList.add("hidden");
  collapsibleDivAddQA.classList.remove("hidden");
  collapsibleDivAddQA.classList.add("active"); // 添加激活类
  overlay.classList.remove("hidden");
});

overlay.addEventListener("click", () => {
  overlay.classList.add("hidden");
  collapsibleDivAddQA.classList.add("hidden");
  collapsibleDivAddQA.classList.remove("active"); // 移除激活类
  topbarNav.classList.remove("hidden");
});

这种方式通过类切换控制元素显示状态，样式优先级一致，代码更易维护，符合CSS模块化的最佳实践。

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