在选中时突出显示图像

Question

HTML

<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

.chk:checked + .product-add-image-preview{
    border: 8px solid;
    border-color: #16bb65;
    margin: 2px;
}

如何在选中时使图像“突出显示”？我可以为标签（粗体）而不是图像。

http://jsfiddle.net/CjpmP/

Answer 1

使用general sibling combinator ~：

.check-with-label:checked ~ .product-add-image-preview {
  /* style */
}

jsFiddle example

adjacent sibling combinator +仅选择紧接的后续元素。