无法运作
<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正常工作。
那是因为您尝试访问图像，但是您忘记了标签。另外，您不想使用〜，而是想使用+，因此它将访问以下内容，并且仅访问以下标签。再次用〜替换+，您将明白我的意思。
.check-with-label:checked + label > .product-add-image-preview {
border:10px solid yellow;
padding:0; /* To keep things from moving */
}
这是更新的小提琴。我添加了第二个图像，因此您可以看到它们彼此独立工作：http : //jsfiddle.net/4QV3s/1/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句