Question

我有一个ID为someID-1的单选按钮和ID为navi1的div。

<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;
}

我应该如何修改代码？

我有几十个单选按钮（someID-1和someID-99之间的ID名称）。我想拥有动态代码。

我不想使用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;
}

如果选中单选按钮，则显示div

2 个答案: