选中复选框更改图像背景

Question

我正在尝试实现此功能，但是当我单击复选框（复选框处于选中状态）时，该复选框不会更改其背景图像，并且像以前一样保持不变。

我如何尝试做到这一点：

<div class="checkbox">
  <input class="car_checkbox" type="checkbox" value="1">
  <span class="private_zip"></span>
</div>

和CSS：

input[type="checkbox"] {
    opacity:0;
    height: 18px;
    width: 18px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

input[type="checkbox"] + span.private_zip {
  width: 18px;
  height: 18px;
  display: inline-block;
  background: url("checkbox.png") no-repeat;
}

input[type="checkbox"]:checked + span.private_zip {
  width: 18px;
  height: 18px;
  display: inline-block;
  background: url("checkbox_check.png") no-repeat;
}

为什么单击复选框后不切换图像？

谢谢

Answer 1

CSS的最后一位应该是：

input[type="checkbox"]:checked {
  width: 18px;
  height: 18px;
  display: inline-block;
  background: url("checkbox_check.png") no-repeat;
}

删除+ span.private_zip部分。

Answer 2

读这个

https://www.w3.org/community/webed/wiki/Advanced_CSS_selectors

UI元素状态伪类部分

我希望这个能帮上忙