如果單選按鈕被選中，則顯示div

Question

我有一個單選按鈕，其ID爲someID-1，其中ID爲navi1。

<input name="nappi" type="radio" id="someID-1" /> 

<div>&nbsp; 
    <div id="navi1"> 
    <div style="z-index:100;position:fixed;right:0;top:0;bottom:0;"> 
     <label for="someID-2">2</label> 
    </div> 
    </div> 
</div> 

這個CSS代碼工作得很好：

div[id^="navi"] { 
    display: none; 
} 

但是，這並不工作確定：

input#someID-1:checked #navi1 { 
    display: block; 
} 

我應該怎樣修改代碼？

我有幾十個單選按鈕（ID名稱在someID-1和someID-99之間）。我想要有動態代碼。

我不想使用JavaScript。

Answer 1

你可以這樣做。你可以看我以前here

#navi1{ 
 
    display: none; 
 
} 
 
input[type="radio"]#someID-1:checked + div #navi1{ 
 
display: block; 
 
} 
 
.box{ 
 
    border: 1px solid #ddd; 
 
    width: 200px; 
 
    height: 200px; 
 
    text-align: center; 
 
}

<input name="nappi" type="radio" id="someID-1" /> 
 

 
<div class="box">&nbsp; 
 
    <div id="navi1"> 
 
    <div> 
 
     <label for="someID-2">2</label> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

您需要正確瀏覽文檔層次在你的CSS選擇器的詳細信息。所以這個作品：

div[id^="navi"] 
{ 
    display: none; 
} 

#someID-1:checked + div div { 
    display:block; 
}