css - 选中复选框时如何更改 img 样式？

Question

这是我的代码

<div class="itemTaskUser">
  <input type="checkbox" name="users" id="user0" style="display: none">
  <label for="user0" class="checkbox-inline">
  <div>Rodolphe</div>
  <img src="rodo.jpg" class="avatar32" >
  </label>
</div>

我试图实现的是设置一个 CSS，当复选框被选中时，它将在 img 上放置一个绿色边框

我试过:

input:checked + label {
    color:green;
    font-weight: bold;
}
input:checked + img {
    border:2px solid green;
    width: 64px;
}

选中复选框时标签为绿​​色:GOOD

但是没有图像!

有什么线索吗？

Answer 1

有问题的代码的问题是 label 是 input 而不是 img 的相邻兄弟，所以第二个选择器不选择任何元素。

+ 是 adjacent sibling combinator用于选择 DOM 中引用元素旁边的元素。这里的 label 是 input(reference 元素)和 img< 的直接兄弟 是 label 的子项，因此使用 input:checked + label img 将 选择 img 它是 label < strong>这又是已检查输入的相邻兄弟。

input:checked + label {
  color: green;
  font-weight: bold;
}
input:checked + label img {
  border: 2px solid green;
  width: 64px;
}

<div class="itemTaskUser">
  <input type="checkbox" name="users" id="user0" style="display: none">
  <label for="user0" class="checkbox-inline">
    <div>Rodolphe</div>
    <img src="rodo.jpg" class="avatar32">
  </label>
</div>

我们也可以使用 input:checked + label > img 作为选择器。这将进一步缩小范围，因为 > combinator将选择 img 仅当它是 label 的 child 并且不是孙子或曾孙时孙子等