1

我的 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; }

为了更改父标签的背景颜色，但这不起作用。这样做的正确方法是什么？

4

3 回答 3

3

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

-编辑：

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

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

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

于 2012-09-28T21:59:13.300 回答
2

这不能用严格的 CSS 来完成。CSS（甚至不是 CSS 3）没有“父”选择器。

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

于 2012-09-28T22:01:10.180 回答
1

如果您使用标记，其中inputandlabel元素是相邻的兄弟元素并且没有嵌套并且标签出现在复选框之后（这是更常见的用法，因此更好的可用性），您可以在纯 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; }
于 2012-09-29T05:40:20.123 回答