能否通过CSS根据同级div内按钮的隐藏状态移除指定样式？

结论是：纯CSS没办法直接实现你要的效果，核心限制有两个：

• CSS选择器无法反向选中前置同级元素：你的.item div在按钮所在div的前面，而CSS的同级选择器（+相邻同级、~通用同级）只能选中当前元素之后的元素，没法反过来影响前面的.item。哪怕按钮所在的div有状态变化，也没法触发修改它前面元素的样式。
• CSS感知不到JS动态设置的隐藏状态：如果按钮是通过JS直接设置display: none或visibility: hidden来隐藏的，CSS没有任何机制能检测到这个动态变化的状态，自然没法关联修改.item的样式。

变通方案（需调整实现方式） #

如果一定要用CSS实现类似效果，得换个思路调整逻辑：

1. 把按钮的隐藏改成CSS类控制，同时调整HTML结构让.item在按钮div之后，这样就能用同级选择器关联样式：

<div>
  <button onclick="this.parentElement.classList.add('button-hidden')">
    Hide me
  </button> 
</div>
<div class="item">
  Some Text
</div>

.item {
  background-image: linear-gradient(180deg,black,white);
}
/* 按钮所在div有隐藏类时，移除后面.item的背景图 */
.button-hidden ~ .item {
  background-image: none;
}
/* 同时隐藏按钮 */
.button-hidden button {
  display: none;
}

2. 或者用隐藏的复选框模拟点击交互（完全不需要JS），但同样需要调整HTML结构，把复选框放在.item前，用兄弟选择器控制样式。

但如果严格保留你原有的HTML结构和JS隐藏按钮的逻辑，纯CSS是做不到这个需求的，还是得用JS同步修改.item的样式。

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