html - 同级元素的 CSS 选择器

Question

W/O JavaScript，我可以通过使用 CSS 和复选框来控制表格的显示，如本例中，使用兄弟选择器的功能性兄弟选择器示例，“~”（波浪号/波浪线/旋转）CSS 选择器是什么中描述的意思是？

#C-control:checked ~ .C-content {display: table;}
#F-control:checked ~ .F-content {display: table;}
.C-content                      {display: none;}
.F-content                      {display: none;}

<input id='C-control' type='checkbox'>C
<input id='F-control' type='checkbox'>F

<table class='C-content'>
<tr><td>Bern</td><td>ZZZZ</td></tr>
<tr><td>Nairobi</td><td>xxx</td></tr>
</table>

<table class='F-content'>
<tr><td>Dallas</td><td>yyyy</td></tr>
<tr><td>New York</td><td>AAA</td></tr>
</table>

我想以类似的方式控制各个行的显示，非功能按行示例

#C-control:checked ~ .C-content {display: table-row;}
#F-control:checked ~ .F-content {display: table-row;}
.C-content                      {display: none;}
.F-content                      {display: none;}

<input id='C-control' type='checkbox'>C
<input id='F-control' type='checkbox'>F

<table>
<tr class='C-content'><td>Bern</td><td>ZZZZ</td></tr>
<tr class='F-content'><td>Dallas</td><td>yyyy</td></tr>
<tr class='C-content'><td>Nairobi</td><td>xxx</td></tr>
<tr class='F-content'><td>New York</td><td>AAA</td></tr>
</table>

标签： htmlcss

Answer 1

这应该有效。基本上你必须先确定你的意思是什么兄弟，然后再深入。在兄弟选择器之后添加table到选择器中即可。~

您的第一个示例有效，因为该表具有类，并且两个表都是复选框的直接兄弟。

#C-control:checked ~ table .C-content {display: table-row;}
/*       I added this --^  */
#F-control:checked ~ table .F-content {display: table-row;}
/*           and this --^  */
.C-content                      {display: none;}
.F-content                      {display: none;}

<input id='C-control' type='checkbox'>C
<input id='F-control' type='checkbox'>F

<table>
  <tr class='C-content'><td>Bern</td><td>ZZZZ</td></tr>
  <tr class='F-content'><td>Dallas</td><td>yyyy</td></tr>
  <tr class='C-content'><td>Nairobi</td><td>xxx</td></tr>
  <tr class='F-content'><td>New York</td><td>AAA</td></tr>
</table>