純CSS

Question

單選按鈕點擊我試圖隱藏時隱藏一組圖像/顯示一組圖像時，單選按鈕爲開/關純CSS。

有這樣一個4個單選按鈕（與第2集等）：

<input type="radio" name="imagetest" id="firstSet"><label for="firstSet" id="firstSet">First Set</label> 

我已經把剛剛低於單選按鈕一組圖像在一個div：

<div id="images"> 
<img src="images/01.jpg" class="firstset"> 
<img src="images/02.jpg" class="firstset"> 
<img src="images/03.jpg" class="secondset"> 
<img src="images/04.jpg" class="secondset"> 
<img src="images/05.jpg" class="thirdset"> 
<img src="images/06.jpg" class="firstset"> 
</div> 

有從計算器老線程的一些線索，我定義我的CSS是這樣的：

input#firstSet:checked ~ .firstset { 
display: block; 
} 
input#secondSet:checked ~ .firstset, input#thirdSet:checked ~ .firstset { 
display: none; 
} 

但是它不WO完全沒有出現/隱藏的意圖。

會有人對如何解決這一問題的任何線索？

感謝， 勒布

Answer 1

input#firstSet:checked ~ #images > .firstset { 
 
display: block; 
 
} 
 
input#secondSet:checked ~ #images > .firstset, input#thirdSet:checked ~ .firstset { 
 
display: none; 
 
}

<input type="radio" name="imagetest" id="firstSet"><label for="firstSet" id="firstSet">First Set</label> 
 
<div id="images"> 
 
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/JPEG_example_JPG_RIP_050.jpg" class="firstset"> 
 
<img src="http://findicons.com/files/icons/1637/file_icons_vs_2/256/jpg.png" class="firstset"> 
 
<img src="http://www.iconarchive.com/download/i93939/uiconstock/flat-file-type/jpg.ico" class="secondset"> 
 
<img src="https://media.alienwarearena.com/media/tux-r.jpg" class="secondset"> 
 
<img src="https://media.alienwarearena.com/media/tux-r.jpg" class="thirdset"> 
 
<img src="https://media.alienwarearena.com/media/tux-r.jpg" class="firstset"> 
 
</div>