css - 更改输入上的父 div[type=checkbox]：用 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;
}

演示