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

Posted 2023-03-05

【中文标题】在输入[type=checkbox]上更改父div：用css检查[重复]

【英文标题】：Change parent div on input[type=checkbox]:checked with css [duplicate]

【发布时间】：2012-06-06 10:47:36

【问题描述】：

我可以弄清楚如何在选中复选框时更改父 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/

【问题讨论】：

我讨厌人们将他们使用的问题标记为重复，而重复项甚至没有答案或公开投票的答案。

如果有人仍在寻找解决方案，这可以提供帮助：jsfiddle.net/eduardoks98/wv0amod8

【参考方案1】：

没有办法只用 CSS 选择父级（直到 CSS4），所以你必须使用 JS..

看到这篇讨论它的帖子here。

【讨论】：

请记住new draft 使用! 而不是$ 来指定选择器的主题。

这个 jQuery 插件声称可以将行为添加到您的样式表中：demo.idered.pl/jQuery.cssParentSelector

我已经尝试了jQuery插件，但没有运气，期待新的CSS4选择器。

或者你可以直接使用lesscss.org之类的东西！

我认为它不会出现在 CSS4 中。因为它的 CSS 是 cascade 样式的，也就是说你可以爬上去，你可以往下走

【参考方案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;

demo

【讨论】：

@hanu 不是真的，+ 定义了下一个元素，没有什么可以访问上一个兄弟元素。