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/