html - 需要 CSS 来显示隐藏的表格行。无法弄清楚 Child Sibling 选择器

Question

我有一个表行，每行末尾都有一个开/关按钮。单击时，我希望隐藏行出现在被单击的行下方。该按钮可以很好地切换“开”和“关”字样，但我似乎无法定位隐藏的行。我以为我可以用 + tr 或 ~tr 选择相邻的行。这是一个简化版本...

input {display:none}
.hiddenrow {display:none}
input+label:before {content:'OFF'}
input:checked+label:before {content:'ON';background:#0F0;padding:0 3px}
input:checked~tr {display:block}

<table border=1>

  <tr>
    <td>Some data goes here&nbsp;&nbsp;&nbsp;</td>
    <td><input id=box1 type=checkbox><label     for=box1></label></td>
  </tr>
  <tr class=hiddenrow id=row2><td colspan=2>This is a hidden row</td></tr>


  <tr>
    <td>This row also has data&nbsp;&nbsp;&nbsp;</td>
    <td><input id=box2 type=checkbox><label for=box2></label></td>
  </tr>
  <tr class=hiddenrow id=row2><td colspan=2>This is another hidden row</td></tr>
  
  
  <tr>
    <td>Even more data goes here&nbsp;&nbsp;&nbsp;</td>
    <td><input id=box3 type=checkbox><label for=box3></label></td>
  </tr>
  <tr class=hiddenrow id=row3><td colspan=2>This is the third hidden row</td></tr>
  

</table>

上面的问题已经解决了，现在问题的下一部分...... 我还有一个问题，但我不想一下子把它全部扔进去。现在我需要在每一行上添加第二个输入。第一个开/关开关将使数据在页面底部的单独 div 中可见。第二个开关将使隐藏的行出现。我们已经让第二个开关按我想要的方式工作。在这个例子中，我的两个开关都在工作，但是有一个问题。我必须为每一行创建一个单独的 css 行(注意 CSS 末尾的 divbox1 和 divbox 2 行)如果我有 1000 行，这就不好了。我正在寻找一种方法，将每行中的第一个开/关开关与正确的 hiddenddiv 相关联，而无需为每个单独的 CSS 行。 (我希望这是有道理的)

.a,.b {float: left;}
.a {width: 260px}
.hiddenrow {clear:left;display: none;}
.e {display: none;}

input {display: none;}
input + label:before {content: 'Off';}
input:checked + label:before {content: 'On';background:#0F0}
input:checked + label + .hiddenrow {display: block;}

#container {border:1px solid red;width:300px;height:200px} 

#divbox1:checked~#container #hiddendiv1 {display:block}
#divbox2:checked~#container #hiddendiv2 {display:block}

<div class="a">This is where data for row 1 goes</div>
<input id="divbox1" type="checkbox"><label for="divbox1"></label>
<input id="box1" type="checkbox"><label for="box1"></label>
<div class="hiddenrow">First row Hidden content. Hidden content.</div>
<br>
<div class="a">This is where data for row 2 goes</div>
<input id="divbox2" type="checkbox"><label for="divbox2"></label>
<input id="box2" type="checkbox"><label for="box2"></label>
<div class="hiddenrow">Second row Hidden content. Hidden content.</div>
<br>

<br><br>
<div id="container">
<div class="e" id="hiddendiv1"><br>div 1 is now viewable</div>
<div class="e" id="hiddendiv2"><br>div 2 is now viewable</div>
</div>

Answer 1

input:checked~tr 不起作用，因为 tr 不是 input 的兄弟。您正在尝试使用 CSS 在 DOM 中上下移动，这是您做不到的。

我不知道是否需要使用表格，但我想到的唯一一件事就是重新处理标记，以便您可以使用下一个同级选择器 +.

这是一个粗略的示例，但类似这样的示例可能适合您。

.a,
.b {
  float: left;
}
.a {
  width: calc(100% - 45px);
}
.b {
  width: 45px;
}
.c {
  clear: left;
  display: none;
}
input {
  display: none;
}
label {
  text-align: center;
}
input + label:before {
  content: 'Off';
}
input:checked+label {
  background: #fc0;
}
input:checked + label:before {
  content: 'On';
}
input:checked + label + .c {
  display: block;
}

<div class="a">1) Some content here.</div>
<input id="box1" type="checkbox">
<label class="b" for="box1"></label>
<div class="c">
  Hidden content. Hidden content. Hidden content. Hidden content. Hidden content. Hidden content.
</div>
<div class="a">2) Some content here.</div>
<input id="box2" type="checkbox">
<label class="b" for="box2"></label>
<div class="c">
  Hidden content. Hidden content. Hidden content. Hidden content. Hidden content. Hidden content.
</div>