CSS基于兄弟的子元素选择元素

Question

我正在搞乱一个正在工作的项目，并且在我去的时候试图了解CSS。 经过大量失败的尝试后，我根据复选框构建了一个切换开关，但现在我想根据复选框的状态更改兄弟元素的样式。

Here is a fiddle showing my code

当我选中/取消选中复选框时，我想要做的是<span class="toggleLabel">内的副本会改变颜色。

我希望这很简单，我一直在考虑这个解决方案。

我没有绑定任何此代码，因此可以重新排列HTML或CSS，但必要。如果您有时间和倾向就此提出建议，我们将不胜感激。

提前干杯

Answer 1

你不能在CSS中选择父母......使用CSS单独执行此操作的唯一方法是重新排列HTML，以便跨度是输入的兄弟。然后你可以使用:checked ~ .toggleLabel。

如果您不想/不能重新排列HTML，JavaScript是您唯一的选择。

http://jsfiddle.net/aLH3u/3/