css - CSS 根据兄弟元素的子元素选择元素

Question

我在工作中搞乱了一个项目，并试图在我进行的过程中了解 CSS。经过多次失败的尝试后，我基于复选框构建了一个切换开关，但现在我想根据复选框的状态更改兄弟元素的样式。

这是一个显示我的代码的小提琴

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

我希望这是直截了当的，我只是看了太久才看到这个解决方案。

我不受任何此类代码的约束，因此可以根据需要重新排列 HTML 或 CSS。如果您有时间和意愿就此提出建议，我们将不胜感激。

提前喝彩

Answer 1

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

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

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