html - 选中复选框时以及单击图像时突出显示图像

Question

不工作

<div>
   <input type="checkbox" id="check" class="check-with-label" />
   <label for="check" class="label-for-check">My Label
   <img class="product-add-image-preview" src="http://ecx.images-amazon.com/images/I/417MwhxcFKL._SY300_.jpg" />
   </label>
</div>

这行得通

<div>
   <input type="checkbox" id="check" class="check-with-label" />
   <label for="check" class="label-for-check">My Label </label>
   <img class="product-add-image-preview" src="http://ecx.images-amazon.com/images/I/417MwhxcFKL._SY300_.jpg" />
</div>

我需要标签中的图像，以便在我选择图像时选中复选框。但是当我在标签中有图像时，我似乎无法使 CSS 工作。

http://jsfiddle.net/4QV3s/

Answer 1

那是因为您正在尝试访问图像，但忘记了标签。此外，您不想使用 ~，而是想使用 +，因此它将访问以下内容，并且仅访问以下标签。再次将 + 替换为 ~，您就会明白我的意思了。

.check-with-label:checked + label > .product-add-image-preview {
    border:10px solid yellow;
    padding:0; /* To keep things from moving */
}

这是一个更新的 fiddle 。我添加了第二张图片，以便您可以看到它们彼此独立工作:http://jsfiddle.net/4QV3s/1/