Html 选中单选按钮时CSS和隐藏/显示div

如果选中单选按钮“my102”，则div“navi102”应可见，而所有其他“navi？？？应该隐藏div。因此，如果选中单选按钮my7，则div navi7应该可见，而所有其他navi？隐藏的div

我怎么能这么做

CSS代码：

.list {
}

.opt ~ .list {
  display: none;
}

.opt:checked ~ .list {
  display: block;
}

input[type="radio"]#my1:checked + div #navi1 { display: block; }
input[type="radio"]#my2:checked + div #navi2 { display: block; }
input[type="radio"]#my3:checked + div #navi3 { display: block; }
input[type="radio"]#my4:checked + div #navi4 { display: block; }
input[type="radio"]#my5:checked + div #navi5 { display: block; }
input[type="radio"]#my6:checked + div #navi6 { display: block; }
input[type="radio"]#my7:checked + div #navi7 { display: block; }
input[type="radio"]#my99:checked + div #navi99 { display: block; }
input[type="radio"]#my100:checked + div #navi100 { display: block; }
input[type="radio"]#my101:checked + div #navi101 { display: block; }
input[type="radio"]#my102:checked + div #navi102 { display: block; }

HTML代码：

<div id="chart" style="white-space: nowrap; position: relative; text-align: center;">
  <div style="display: inline-block">
    <!--
    --><input name="case" type="radio" id="my102" class="opt" /><div class="list" style="float:left;width:70px">&nbsp;
    <div id="navi102">
      <div style="z-index:100;position:fixed;right:0;top:50px">101</div>
    </div>
    </div><div style="display: inline-block;vertical-align:top;width:70px">extra
    </div><!--
    --><input name="case" type="radio" id="my101" class="opt" /><div class="list" style="float:left;width:350px">&nbsp;
    <div id="navi101">
      <div style="z-index:100;position:fixed;left:0;top:100px">102</div>
      <div style="z-index:100;position:fixed;right:0;top:100px">7</div>
    </div>
    </div><div style="display: inline-block;vertical-align:top;width:350px">LQ
    </div><!--
    --><input name="case" type="radio" id="my7" class="opt" /><div class="list" style="float:left;width:350px">&nbsp;
    <div id="navi7">
      <div style="z-index:100;position:fixed;left:0;top:150px">101</div>
      <div style="z-index:100;position:fixed;right:0;top:150px">6</div>
    </div>
    </div><div style="display: inline-block;vertical-align:top;width:350px">L4
    </div><!--
    --><input name="case" type="radio" id="my6" class="opt" /><div class="list" style="float:left;width:350px">&nbsp;
    <div id="navi6">
      <div style="z-index:100;position:fixed;left:0;top:200px">7</div>
      <div style="z-index:100;position:fixed;right:0;top:200px">4</div>
    </div>
    </div><div style="display: inline-block;vertical-align:top;width:350px">L3
    </div><!--
    --><input name="case" type="radio" id="my4" class="opt" /><div class="list" style="float:left;width:350px">&nbsp;
    <div id="navi4">
      <div style="z-index:100;position:fixed;left:0;top:250px">6</div>
      <div style="z-index:100;position:fixed;right:0;top:250px">3</div>
    </div>
    </div><div style="display: inline-block;vertical-align:top;width:350px">L2
    </div><!--
    --><input name="case" type="radio" id="my3" class="opt" /><div class="list" style="float:left;width:350px">
    <div id="navi3">
      <div style="z-index:100;position:fixed;left:0;top:300px">4</div>
      <div style="z-index:100;position:fixed;right:0;top:300px">1</div>
    </div>
    </div><div style="display: inline-block;vertical-align:top;width:350px">R1
    </div><!--
    --><input name="case" type="radio" id="my1" class="opt" checked="checked" /><div class="list" style="float:left;width:0">
    <div id="navi1">
      <div style="z-index:100;position:fixed;left:0;top:350px">3</div>
      <div style="z-index:100;position:fixed;right:0;top:350px">2</div>
    </div>
    </div><div style="display: inline-block;vertical-align:top;width:350px">W2
    </div><!--
    --><input name="case" type="radio" id="my2" class="opt" /><div class="list" style="float:right;width:350px">&nbsp;
    <div id="navi2">
      <div style="z-index:100;position:fixed;left:0;top:400px">1</div>
      <div style="z-index:100;position:fixed;right:0;top:400px">5</div>
    </div>
    </div><div style="display: inline-block;vertical-align:top;width:350px">WQ
    </div><!--
    --><input name="case" type="radio" id="my5" class="opt" /><div class="list" style="float:right;width:350px">&nbsp;
    <div id="navi5">
      <div style="z-index:100;position:fixed;left:0;top:450px">2</div>
      <div style="z-index:100;position:fixed;right:0;top:450px">100</span></div>
    </div>
    </div><div style="display: inline-block;vertical-align:top;width:70px">extra
    </div><!--
    --><input name="case" type="radio" id="my100" class="opt" /><div class="list" style="float:right;width:70px">&nbsp;
    <div id="navi100">
      <div style="z-index:100;position:fixed;left:0;top:500px">5</div>
    </div>
    </div><!--

    --><div style="z-index:99;width:70px;position:fixed;left:0;top:100px;margin:auto;background-color:red"><br />
    </div>

    <div style="z-index:99;width:70px;position:fixed;right:0;top:100px;margin:auto;background-color:red"><br />
    </div>
  </div>
</div>

101
额外的
102
7.
LQ
101
6.
L4
7.
4.
L3
6.
3.
L2
4.
1.
R1
3.
2.
W2
1.
5.
WQ
2.
100
额外的
5.

在这种情况下，创建最低版本的代码会有很大帮助-您的代码似乎是正确的，但由于发生了这么多问题，很难排除故障：

HTML:

---

这是我自己的解决办法

CSS:

HTML:

101
额外的
102
7.
LQ
101
6.
L4
7.
4.
L3
6.
3.
L2
4.
1.
R1
3.
2.
W2
1.
5.
WQ
2.
100
额外的
5.

您的html中有错误。有

，但我找不到该标签的任何开口

这一页看起来像坏了。它的宽度和空间看起来很奇怪 也许你想要，我只是说。这就是为什么我要写一个简单的例子，而不是整个代码（很难阅读，结果也很难检查）

#内容1
{
显示：无；
}
#内容2
{
显示：无；
}
#切换1：选中~#内容1
{
显示：块；
}
#切换2：选中~#内容2
{
显示：块；
}

切换1
切换2



内容1
Content2

在这种情况下不允许使用JavaScript或jQuery。

<div>
  <input type="checkbox" id="ch1" />
  <div>
    <div id="d1">first</div>
  </div>
  <input type="checkbox" id="ch2" />
  <div>
    <div id="d2">second</div>
  </div>
</div>

input#ch1:checked + div #d1 {
  border: 1px solid red;
}

input#ch2:checked + div #d2 {
  border: 1px solid blue;
}

.list {
}

.opt ~ .list {
  display: none;
}

.opt:checked ~ .list {
  display: block;
}

input[type="radio"]#my1:checked + div #navi1 { display: block; }
input[type="radio"]#my2:checked + div #navi2 { display: block; }
input[type="radio"]#my3:checked + div #navi3 { display: block; }
input[type="radio"]#my4:checked + div #navi4 { display: block; }
input[type="radio"]#my5:checked + div #navi5 { display: block; }
input[type="radio"]#my6:checked + div #navi6 { display: block; }
input[type="radio"]#my7:checked + div #navi7 { display: block; }
input[type="radio"]#my99:checked + div #navi99 { display: block; }
input[type="radio"]#my100:checked + div #navi100 { display: block; }
input[type="radio"]#my101:checked + div #navi101 { display: block; }
input[type="radio"]#my102:checked + div #navi102 { display: block; }

<div id="chart" style="white-space: nowrap; position: relative; text-align: center;">
  <div style="display: inline-block">
    <!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my102" class="opt" /><div class="list" style="float:left;width:0">
    <div id="navi102">
      <div style="z-index:100;position:fixed;right:0;top:50px">101</div>
    </div>
    </div></DIV><div style="display: inline-block;vertical-align:top;width:70px">extra
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my101" class="opt" /><div class="list" style="float:left;width:0">
    <div id="navi101">
      <div style="z-index:100;position:fixed;left:0;top:100px">102</div>
      <div style="z-index:100;position:fixed;right:0;top:100px">7</div>
    </div>
    </div></DIV><div style="display: inline-block;vertical-align:top;width:350px">LQ
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my7" class="opt" /><div class="list" style="float:left;width:0">
    <div id="navi7">
      <div style="z-index:100;position:fixed;left:0;top:150px">101</div>
      <div style="z-index:100;position:fixed;right:0;top:150px">6</div>
    </div>
    </div></DIV><div style="display: inline-block;vertical-align:top;width:350px">L4
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my6" class="opt" /><div class="list" style="float:left;width:0">
    <div id="navi6">
      <div style="z-index:100;position:fixed;left:0;top:200px">7</div>
      <div style="z-index:100;position:fixed;right:0;top:200px">4</div>
    </div>
    </div></DIV><div style="display: inline-block;vertical-align:top;width:350px">L3
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my4" class="opt" /><div class="list" style="float:left;width:0">
    <div id="navi4">
      <div style="z-index:100;position:fixed;left:0;top:250px">6</div>
      <div style="z-index:100;position:fixed;right:0;top:250px">3</div>
    </div>
    </div></DIV><div style="display: inline-block;vertical-align:top;width:350px">L2
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my3" class="opt" /><div class="list" style="float:left;width:0">
    <div id="navi3">
      <div style="z-index:100;position:fixed;left:0;top:300px">4</div>
      <div style="z-index:100;position:fixed;right:0;top:300px">1</div>
    </div>
    </div></DIV><div style="display: inline-block;vertical-align:top;width:350px">R1
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my1" class="opt" checked="checked" /><div class="list" style="float:left;width:0">
    <div id="navi1">
      <div style="z-index:100;position:fixed;left:0;top:350px">3</div>
      <div style="z-index:100;position:fixed;right:0;top:350px">2</div>
    </div>
    </div></DIV><div style="display: inline-block;vertical-align:top;width:350px">W2
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my2" class="opt" /><div class="list" style="float:right;width:0">
    <div id="navi2">
      <div style="z-index:100;position:fixed;left:0;top:400px">1</div>
      <div style="z-index:100;position:fixed;right:0;top:400px">5</div>
    </div>
    </div></DIV><div style="display: inline-block;vertical-align:top;width:350px">WQ
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my5" class="opt" /><div class="list" style="float:right;width:0">
    <div id="navi5">
      <div style="z-index:100;position:fixed;left:0;top:450px">2</div>
      <div style="z-index:100;position:fixed;right:0;top:450px">100</div>
    </div>
    </div></DIV><div style="display: inline-block;vertical-align:top;width:70px">extra
    </div><!--
    --><input name="case" type="radio" id="my100" class="opt" /><div class="list" style="float:right;width:0">
    <div id="navi100">
      <div style="z-index:100;position:fixed;left:0;top:500px">5</div>
    </div>
    </div><!--

    --><div style="z-index:99;width:70px;position:fixed;left:0;top:100px;margin:auto;background-color:red"><br />
    </div>

    <div style="z-index:99;width:70px;position:fixed;right:0;top:100px;margin:auto;background-color:red"><br />
    </div>
  </div>
</div>