html - 在纯 CSS 中基于复选框隐藏表格行

Question

一些背景故事，对于那些关心的人:前段时间我偶然发现了这个: https://medium.com/front-end-hacking/how-it-feels-to-learn-javascript-in-2017-a934b801fbe ，特别是这个:https://brlewis.github.io/2017/planets.html

今天我想:CSS 完全有能力根据复选框的状态隐藏内容，这将实现几乎相同的效果。唯一的麻烦是，我不知道 CSS 选择器是否足够灵活以选择正确的表格行。

所以，我的问题是:给定一些类似这样的 HTML:

<label><input type=checkbox id=rock> Terrestrial</label>
<label><input type=checkbox id=gas> Gas Giant</label>
<label><input type=checkbox id=ice> Ice Giant</label>
<table>
<tr class=rock><td>whatever
<tr class=ice><td>whatever
... and so one...
</table>

我们可以做这样的事情吗？

magic ~ > :checked ~ tr {display: none}

Answer 1

最终答案:

这是我对您要尝试做的事情的模型。顺便说一句 Nice Question!!!

input#rock:checked ~ table tr.rock {display: block}

input#gas:checked ~ table tr.gas {display: block}

input#ice:checked ~ table tr.ice {display: block}

input:checked ~ table tr {display:none}

<input type=checkbox id=rock><label> Terrestrial</label>
<input type=checkbox id=gas><label> Gas Giant</label>
<input type=checkbox id=ice><label> Ice Giant</label>
<table>
<tr class=rock><td>whatever for rock</td></tr>
<tr class=ice><td>whatever for ice</td></tr>
<tr class=gas><td>whatever for gas</td></tr>
</table>

旧答案:

如果将标签和复选框分开，就可以这样实现!

input:checked ~ table tr {display: none}

<input type=checkbox id=rock checked><label> Terrestrial</label>
<input type=checkbox id=gas><label> Gas Giant</label>
<input type=checkbox id=ice><label> Ice Giant</label>
<table>
<tr class=rock><td>whatever</td></tr>
<tr class=ice><td>whatever</td></tr>
</table>