如果单选按钮被选中，则显示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; 
}