通用兄弟选择器在嵌套Div中失效？求替代选择器方案

你的问题核心在于通用兄弟选择器~的作用范围限制：它只能选中同一父元素下、位于当前元素之后的兄弟元素。现在你把按钮（.size-btn）和目标背景容器（.f-aX）分别放到了两个独立的.container里，它们不再是同一父级的兄弟，所以原来的CSS选择器自然失效了。

CSS目前没有支持跨容器选择关联元素的原生选择器，所以我们需要用JavaScript来实现这个交互逻辑，具体步骤如下：

实现步骤 #

1. 给每个大小按钮绑定鼠标悬停、离开以及聚焦、失焦事件；
2. 在事件触发时，切换对应目标容器的背景图（或通过添加/移除CSS类来控制样式）。

代码示例 #

HTML（保留现有结构，新增关联标识）

<div class="flex-container">
  <div class="container">
    <a class="size-btn a5" href="#a5" tabindex="1" data-target="f-a5">
      <div class="size-txt">
        <p class="size">A5</p>
        <p class="size-cm">14,8x21cm</p>
        <p class="size-a4">1/2e van A4</p>
      </div>
    </a>
    <a class="size-btn a6" href="#a6" tabindex="1" data-target="f-a6">
      <div class="size-txt">
        <p class="size">A6</p>
        <p class="size-cm">10,5 x 14,8cm</p>
        <p class="size-a4">1/4e van A4</p>
      </div>
    </a>
    <a class="size-btn a7" href="#a7" tabindex="1" data-target="f-a7">
      <div class="size-txt">
        <p class="size">A7</p>
        <p class="size-cm">7,4 x 10,5cm</p>
        <p class="size-a4">1/8e van A4</p>
      </div>
    </a>
  </div>
  <div class="container">
    <div class="f-a4"> Dit is A4, het standaard papier formaat in Nederland </div>
    <div class="f-a5"></div>
    <div class="f-a6"></div>
    <div class="f-a7"></div>
  </div>
</div>

（注：给每个按钮添加data-target属性，用来关联对应的目标容器类名，方便JS快速定位）

CSS（简化样式管理）

/* 激活状态的背景样式 */
.bg-active {
  background-image: url(https://mooze.nl/staticfiles/img/flyer-poster-preview.jpg);
}

/* 目标容器的基础样式（根据你的需求调整） */
.f-a5, .f-a6, .f-a7 {
  width: 300px;
  height: 200px;
  border: 1px solid #eee;
  transition: background-image 0.3s ease;
}

JavaScript交互逻辑

// 获取所有大小按钮
const sizeButtons = document.querySelectorAll('.size-btn');

// 定义切换背景的通用函数
function toggleActiveBackground(targetClass) {
  // 先移除所有目标容器的激活类
  document.querySelectorAll('.f-a5, .f-a6, .f-a7').forEach(el => {
    el.classList.remove('bg-active');
  });
  // 给当前目标添加激活类
  const targetElement = document.querySelector(`.${targetClass}`);
  if (targetElement) {
    targetElement.classList.add('bg-active');
  }
}

// 给每个按钮绑定事件
sizeButtons.forEach(btn => {
  // 鼠标悬停进入
  btn.addEventListener('mouseenter', () => {
    toggleActiveBackground(btn.dataset.target);
  });
  // 聚焦时
  btn.addEventListener('focus', () => {
    toggleActiveBackground(btn.dataset.target);
  });
  // 鼠标离开/失焦时（可根据需求调整是否移除背景）
  btn.addEventListener('mouseleave', () => {
    // document.querySelector(`.${btn.dataset.target}`).classList.remove('bg-active');
  });
  btn.addEventListener('blur', () => {
    // document.querySelector(`.${btn.dataset.target}`).classList.remove('bg-active');
  });
});

额外说明 #

• 如果希望点击按钮后留存背景状态，可以给按钮添加click事件，保留当前激活类；
• 这个方案完全兼容你现有的Flex布局结构，不需要调整容器划分；
• JS方案的灵活性更高，后续如果需要扩展更多交互逻辑（比如多状态切换）也更容易实现。

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