隐藏基于纯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>