仅通过CSS选择器能否实现基于.open类的.top元素样式切换？

嘿，这个需求完全可行，不过得依赖CSS Selectors Level 4里的:has()选择器（也就是大家常说的“父选择器”），目前主流现代浏览器都已经支持这个特性了。

先把你的HTML结构理清楚，方便理解逻辑：

<div class="wrapper">
  <div> <!-- 我们叫它容器A，是.wrapper的第一个直接子元素 -->
    <div>
      <div class="open"></div>
    </div>
  </div>
  <div> <!-- 容器B，是容器A的相邻兄弟元素 -->
    <div class="top"></div>
  </div>
</div>

核心逻辑是：我们需要先判断容器A里面是否存在.open元素，如果存在，就选中它的相邻兄弟容器B，再定位到里面的.top元素修改样式；默认状态下给.top设置top: 0px即可。

直接上可运行的CSS代码：

/* 默认状态：.open未激活时，.top的top值为0 */
.top {
  position: relative; /* 划重点：top属性只有在元素有定位（relative/absolute等）时才会生效 */
  top: 0px;
  /* 可选：加个过渡动画让样式变化更丝滑 */
  transition: top 0.3s ease;
}

/* 当.open存在时，修改.top的top值为50px */
.wrapper > div:first-child:has(.open) + div .top {
  top: 50px;
}

兼容性说明 #

:has()选择器已经被Chrome、Firefox 121+、Safari等现代浏览器支持，但完全不兼容Internet Explorer。如果你的项目需要兼容旧版IE，那纯CSS就没办法实现这个需求了——因为传统CSS没有父选择器能力，也无法跨分支选择非父子/兄弟关系的元素。这种情况下只能靠JS切换样式，但题目明确说不能改JS，所以旧IE环境下就没法达成目标。

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