html - 如果选中输入设置父背景

Question

我的 html 标记看起来像这样..

<div class="siteCheckboxes">
   <label for="filterAll">
      All <input name="filterAll" type="checkbox" id="filterAll" checked="checked"  />
   </label>
</div>

我需要知道如何更改复选框所在父标签的颜色。我试过做...

input[type="checkbox"]:checked > label{ background-color:#F00; } 

为了改变父标签的背景颜色，但这不起作用。执行此操作的正确方法是什么？

Answer 1

CSS 不能根据子项修改父项。这是parent -> child 访问的单向路径。

-编辑:

正如 Little Big Bot 在评论中指出的那样，可以使用同级选择器(+ 和 ~)，但尚未完全支持它们。如果您按照您的说明嵌套元素，它们将无济于事。无论如何，它们是:

http://reference.sitepoint.com/css/adjacentsiblingselector

http://reference.sitepoint.com/css/generalsiblingselector