如何使复选框破解与目标div中的输入一起工作

Question

这是我的html:

<div id="blabla" class="control-me">
<label for="toggle">the label</label>
<input type="checkbox" id="toggle">
</div>

和我的CSS:

.control-me {
border: #222222;
background-color: aqua;
}
#toggle:checked ~ .control-me {
border: #cd0a0a;
background-color: #cd0a0a;
}
#toggle {
opacity: 100;
}

这是基于复选框破解的，并在jsFiddle中进行了巧妙的总结。

当我选中复选框时，我希望div从浅绿色变为红色，但它没有。

为什么以及如何使其发挥作用？

我被自动地指向这个问题，但我甚至不明白为什么，所以我又问了同样的问题。

Answer 1

您的代码无法工作，因为在您的情况下，您试图访问父级而不是同级。

.control-me {
border: #222222;
background-color: aqua;
}
#toggle:checked~.control-me {
border: #cd0a0a;
background-color: #cd0a0a;
}
#toggle {
opacity: 100;
}

<div>
<input type="checkbox" id="toggle">
<div id="blabla" class="control-me">
<label for="toggle">the label</label>
</div>
</div>

您可能无法单独使用CSS访问父项，因此最好只更改复选框的位置，使其在兄弟项上工作。尽管你提到的问题有很多选择，但根据你提到的博客，你可以使用这种方法。