選擇在輸入時檢查下一個元素

Question

HTML：

<label> 
    <input type="checkbox" /> 
</label> 
<div> 
    stuff 
</div> 

我希望能夠風格根據輸入的選中狀態DIV元素，像

input ~ div{ 
    display: none; 
} 

input:checked ~ div{ 
    display: block; 
} 

顯然， ~選擇器在這裏似乎不起作用。 +

有沒有其他的解決方案（除了JavaScript）？

Answer 1

不幸的是，沒有辦法在純CSS中選擇祖先，這是您選擇祖先的兄弟姐妹所需要的。

我看到人們圍繞其他內容與標籤 - 而這是一個非常值得商榷的做法，它將允許您使用+選擇樣式的DIV：

<label> 
    <input type="checkbox" /> 

    <div> 
     stuff 
    </div> 
</label> 

編輯：

還是這個（感謝@lnrbob指點出來）

<label for="myCheckbox"> 
    This is my label 
</label> 

<input id="myCheckbox" type="checkbox" /> 
<div> 
    stuff 
</div> 

Answer 2

試試這個，林不知道它是什麼它的跨瀏覽器兼容性是。

input:checked + div 
{ 
background: #333; 
height: 30px; 
width: 30px; 
} 

這應該工作，但我wouldnt做到這一點，我會做Javascript。

見我jsfiddle