选定复选框上的 CSS

Question

我的网站上至少有 4 个这样的复选框

<div id="product">
   <div class="checkbox">
      <label>
        <input type="checkbox">
        <img src="http://test.com/dev/image/cache/catalog/chains/chain_1-50x50.jpg" alt="Chain 1 +₱10.00" class="img-thumbnail"> 
        Chain 1 (+₱10.00)
      </label>
   </div>
</div>

如何添加CSS，当我选择复选框时，图像会添加一些边框并且文本会更大

我有这个代码，但不起作用

 #product :checked + label {
  font-weight: bold;
} 
 #product :checked + img{
  border:1px solid red
} 

Answer 1

CSS 规则:

#product :checked + label {
  font-weight: bold;
}

将匹配<label>这是 :checked 的直接兄弟元素。在您的情况下，标签是复选框的父级。要使文本加粗，您可以将其包裹在 <span> 中。然后使用~组合器选择任何匹配的兄弟:

HTML

<div id="product">
   <div class="checkbox">
      <label>
        <input type="checkbox">
        <img src="http://test.com/dev/image/cache/catalog/chains/chain_1-50x50.jpg" alt="Chain 1 +₱10.00" class="img-thumbnail"> 
        <span>Chain 1 (+₱10.00)</span>
      </label>
   </div>
</div>

CSS

#product :checked ~ span {
  font-weight: bold;
}

如果 HTML 与问题中的内容相同，则以下内容应该有效:

 #product :checked + img{
    border:1px solid red
 } 

如果没有，则复选框和图像之间可能有另一个元素。在这种情况下，您可以使用 #product :checked ~ img如上所述。