如果选中输入，则设置父背景

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

Answer 2

严格的CSS无法做到这一点。 CSS（甚至不是CSS 3）没有“父”选择器。

更多信息：http://css-tricks.com/parent-selectors-in-css/

Answer 3

如果使用标记，input和label元素是相邻的兄弟，而不是嵌套，并且标签出现在复选框之后（这是更常见的用法，因此可以在纯CSS中执行此操作更好的可用性）：

<input name="filterAll" id="filterall" type="checkbox" id="filterAll" 
       checked="checked"  />
<label for="filterAll">All</label>

然后您可以使用相邻的兄弟选择器+：

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