在输入[type = checkbox]上更改父div:用css检查

Question

我可以弄清楚当复选框被选中时如何使父div更改:(更改以下段落工作正常.

在Chrome中尝试了这种没有运气的方法:

HTML

?<div>
    <input type="checkbox??????????????????????????????" checked>
    <p>Test</p>
</div>???????????????????????????????????????????????

CSS

div {
    background: pink;
    width: 50px;
    height:50px;
}
div + input[type=checkbox]:checked {
  background: green;
}

input[type=checkbox]:checked + p {
    background: blue;
}

http://jsfiddle.net/lajlev/3xUac/

Answer 1

无法选择只有CSS的父级(直到CSS4),所以你必须使用JS ..

看这篇文章在这里谈论它.

Answer 2

试试这个 :

HTML

<input type="checkbox" checked>
<div>
   <p>Test</p>
</div>

CSS

div {
    background: pink;
    width: 50px;
    height:50px;
}
input[type=checkbox]:checked + div {
  background: green;
}

input[type=checkbox]:checked + div p {
    background: blue;
}

演示