如何通过CSS选择器根据单选框选中状态匹配对应图片？

你的需求是通过单选框的选中状态，控制MenuDisplayFocus容器里对应图片的显示/隐藏，且图片和单选框并非子元素或直接相邻关系。下面分两种场景给出解决方案：

一、纯CSS实现（依赖DOM结构关系） #

如果单选框和MenuDisplayFocus处于同一父级下的兄弟节点，或共享同一个祖先节点，可利用CSS的:has()伪类实现，目前主流浏览器（Chrome、Firefox 121+、Safari）都已支持该特性。

假设你的HTML结构大致如下：

<div class="radio-wrap">
  <input type="radio" name="tab" id="tab1" checked>
  <input type="radio" name="tab" id="tab2">
  <input type="radio" name="tab" id="tab3">
</div>
<div class="MenuDisplayFocus">
  <img src="pic1.png" alt="选项1对应图">
  <img src="pic2.png" alt="选项2对应图">
  <img src="pic3.png" alt="选项3对应图">
</div>

对应的CSS代码：

/* 默认隐藏所有图片 */
.MenuDisplayFocus img {
  display: none;
}

/* 选中第一个单选框时，显示第一张图 */
.radio-wrap:has(#tab1:checked) + .MenuDisplayFocus img:nth-child(1) {
  display: block;
}

/* 选中第二个单选框时，显示第二张图 */
.radio-wrap:has(#tab2:checked) + .MenuDisplayFocus img:nth-child(2) {
  display: block;
}

/* 选中第三个单选框时，显示第三张图 */
.radio-wrap:has(#tab3:checked) + .MenuDisplayFocus img:nth-child(3) {
  display: block;
}

如果单选框和MenuDisplayFocus不是直接兄弟，但有共同父容器，只需调整CSS选择器：

.container:has(#tab1:checked) .MenuDisplayFocus img:nth-child(1) {
  display: block;
}

二、JavaScript实现（无DOM结构限制） #

如果DOM结构复杂，纯CSS选择器无法覆盖，或需兼容老版本浏览器，直接用JS控制更稳妥。

代码示例：

// 获取所有目标单选框和图片
const radioBtns = document.querySelectorAll('input[type="radio"][name="tab"]');
const targetImgs = document.querySelectorAll('.MenuDisplayFocus img');

// 初始化：显示默认选中单选框对应的图片
radioBtns.forEach((radio, idx) => {
  if (radio.checked) {
    targetImgs.forEach(img => img.style.display = 'none');
    targetImgs[idx].style.display = 'block';
  }
});

// 监听单选框切换事件
radioBtns.forEach((radio, idx) => {
  radio.addEventListener('change', () => {
    targetImgs.forEach(img => img.style.display = 'none');
    targetImgs[idx].style.display = 'block';
  });
});

这个方案不受DOM结构嵌套限制，只要能通过选择器获取到元素，就能实现需求。

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