使用:has选择器

:has()伪类是CSS语言的最新成员，它允许选择父元素或兄弟元素。
函数:has() CSS伪类表示一个元素，如果作为参数传递的任何相对选择器在锚定到该元素时与至少一个元素匹配。此伪类提供了一种通过将相对选择器列表作为参数来选择父元素或相对于引用元素的上一个同级元素的方法。
在下面的示例代码片段中，我使用:has()选择器来定位"任何具有input:checked的.fruit div"并更新其背景色。

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border: 1px solid #333;
  padding: 20px;
  width: 540px;
}

.fruit {
  width: 120px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 1px solid #333;
  padding: 20px;
  margin: 0 15px 15px 0;
}

.fruit img {
  border-radius: 50px;
}

label {
  margin-top: 20px;
  width: 100%;
}

input, label {
  cursor: pointer; 
}

.fruit:has(input:checked) {
  background: yellow;
}

<div class="container">
  <div class="fruit">
    <img src="https://picsum.photos/30" alt="">
    <input type="radio" name="team" id="Mango" value="Mango" />
    <label for="Mango">Mango</label>
  </div>
  <div class="fruit">
    <img src="https://picsum.photos/30" alt="">
    <input type="radio" name="team" id="Pineapple" value="Pineapple" />
    <label for="Pineapple">Pine Apple</label>
  </div>
  <div class="fruit">
    <img src="https://picsum.photos/30" alt="">
    <input type="radio" name="team" id="Dragonfruit" value="Dragonfruit" />
    <label for="Dragonfruit">Dragonfruit</label>
  </div>
</div>