html - 更改选中的单选按钮旁边的图像样式

Question

当相关按钮被选中时，我正在尝试更改组中每个单选按钮旁边的图像的背景颜色。我使用了以下 HTML 和 CSS:

.option-choice:checked img.img-thumbnail {
    background-color: #004990 !important;
    border-color: red;
}

<div class="radio">
    <label>
        <input class="option-choice" name="option[227]" value="18" type="radio">
         <img src="imageurl.jpg" alt="20mm " class="img-thumbnail">20mm
    </label>
</div>

但是 CSS 不起作用，图像保持不变。有没有可能我的 CSS 在这里不正确，或者根本不可能这样做？

Answer 1

这个..

.option-choice:checked img.img-thumbnail {
  background-color: #004990 !important;
  border-color: red;
}

假定图像是 input 的后代，但事实并非如此。

使用相邻兄弟选择器+

.option-choice:checked + img.img-thumbnail {
  background-color: #004990 !important;
  border-color: red;
}