为选中的单选框关联图片添加边框问题排查

为实现嵌套网格重构代码后，单选框选中状态的指示边框不再显示。刚接触相关技术，确认是选择器引用有误，但试过所有能想到的组合仍未解决。

现有代码 #

CSS代码

.course-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  width: 94%;
  height: 94%;
  background-color: cyan;
  padding: 1.5%;
  grid-gap: 3%;
  margin: auto;
}

.course-container>div {
  display: flex;
  background: red;
  justify-content: center;
  align-items: center;
}

.course-container>div img {
  max-width: calc(100% - 10px);
  opacity: 80%;
  border: 5px solid transparent;
  &:hover {
    opacity: 100%;
    transition: opacity 100ms ease-in-out;
  }
}

.course-container input[type=radio]:checked+img {
  border: 5px solid salmon;
  background-color: salmon;
  opacity: 100%;
  mask-image: linear-gradient(135deg, transparent 4%, gold 0), linear-gradient(-135deg, transparent 4%, gold 0), linear-gradient(45deg, transparent 4%, gold 0), linear-gradient(-45deg, transparent 4%, gold 0);
  mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
  mask-repeat: no-repeat;
  mask-size: 51% 51%;
}

HTML代码

<div class="Thumbnail">
  <div class="course-container">
    <div class="course-thumbnail snesCourses">
      <input type="radio" name="course-thumbnail" id="Bowser-Castle-3" value="Bowser Castle 3" />
      <label for="Bowser-Castle-3">
        <img src="images/courses/Bowser-Castle-3.png" alt='Bowser Castle 3'>
      </label>
    </div>
    <div class="course-thumbnail snesCourses">
      <input type="radio" name="course-thumbnail" id="Donut-Plains-3" value="Donut Plains 3" />
      <label for="Donut-Plains-3">
        <img src="images/courses/Donut-Plains-3.png" alt='Donut Plains 3'>
      </label>
    </div>
    <div class="course-thumbnail snesCourses">
      <input type="radio" name="course-thumbnail" id="Mario-Circuit-3" value="Mario Circuit 3" />
      <label for="Mario-Circuit-3">
        <img src="images/courses/Mario-Circuit-3.png" alt='Mario Circuit 3'>
      </label>
    </div>
    <div class="course-thumbnail snesCourses">
      <input type="radio" name="course-thumbnail" id="Rainbow-Road-SNES" value="Rainbow Road - SNES" />
      <label for="Rainbow-Road-SNES">
        <img src="images/courses/Rainbow-Road-SNES.png" alt='Rainbow Road - SNES'>
      </label>
    </div>
  </div>
</div>

解决方案 #

问题根源是CSS选择器的元素关系匹配错误：
当前选择器.course-container input[type=radio]:checked+img试图选中单选框紧邻的img元素，但实际DOM结构中，img嵌套在label标签内，和单选框并非直接相邻的兄弟元素。

1. 修正选择器

将原选中状态的CSS规则修改为：

.course-container input[type=radio]:checked + label img {
  border: 5px solid salmon;
  background-color: salmon;
  opacity: 100%;
  mask-image: linear-gradient(135deg, transparent 4%, gold 0), linear-gradient(-135deg, transparent 4%, gold 0), linear-gradient(45deg, transparent 4%, gold 0), linear-gradient(-45deg, transparent 4%, gold 0);
  mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
  mask-repeat: no-repeat;
  mask-size: 51% 51%;
}

这个选择器会匹配：.course-container下被勾选的单选框 → 紧邻的兄弟label → 内部的img元素，符合实际DOM层级。

2. 可选交互优化

可以隐藏单选框的视觉显示，让用户点击图片即可触发选中，提升体验，添加以下CSS：

.course-container input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

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