如何基于其他div激活状态为body子元素应用CSS相邻兄弟选择器

你的CSS代码不生效主要有两个关键问题，我们一步步来解决：

1. 相邻兄弟选择器+的误用 #

看你的HTML结构，.global-banner.hide的直接下一个兄弟元素是.alter-banner，而不是.header——它们都被包裹在.main-wrapper里，但中间隔了一个.alter-banner。你用的+是相邻兄弟选择器，只能匹配紧挨着的下一个兄弟元素，所以这个选择器根本找不到目标元素。

2. 错误的层级选择器 #

你写的.global-banner .item-right .overlay-container也是无效的，因为.item-right是.header的子元素，和.global-banner没有嵌套关系，这个选择器完全找不到对应的DOM节点。

修正后的CSS代码 #

/* 原有隐藏banner的样式保留 */
.global-banner.hide {
  display: none !important;
}

/* 修正overlay初始高度的选择器 */
.header .item-right .overlay-container {
  height: 0;
  /* 建议加上过渡动画，体验更流畅 */
  transition: height 0.3s ease;
}

/* 使用通用兄弟选择器~匹配同一父级下的后续兄弟元素 */
body.restrict-body-scroll .main-wrapper .global-banner.hide ~ .header .item-right .overlay-container.active {
  height: 100vh;
}

关键说明 #

• 用**通用兄弟选择器~**替代+，它能匹配同一父元素下，目标元素之后的所有兄弟元素，不管中间隔了多少其他元素。
• 修正了.overlay-container的初始选择器，直接从.header开始定位，确保层级正确。
• 额外添加了transition属性，让高度变化有平滑过渡，提升用户体验（可选，但推荐）。

验证要点 #

确保.overlay-container确实添加了.active类——如果这个类没正确挂载，样式也不会生效，可以通过浏览器开发者工具检查元素的类名状态。

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