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，因此第二个选择器不会选择任何元素。< / p>

+是adjacent sibling combinator，用于选择DOM中参考元素旁边的元素。此处label是input（参考元素）和img 的直接兄弟姐妹是 label的孩子，因此使用input:checked + label img将选择 img 是 label 的后代，后者又是已检查输入的相邻兄弟 。

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的{{1}} 时选择label 不是一个大孩子或一个曾祖母等。

选中复选框后如何更改img样式？

1 个答案: