CSS中的波浪号仅在复选框之后选择元素吗？

Question

我正尝试使用单选按钮和~创建CSS选项卡。如果单选按钮位于内容容器之前，我的选项卡可以工作，但是在之后不可以。

我希望他们是后，因为其中一个选项卡按钮被隐藏，并选择了一个实际的按钮，而且它是真的很难做到这一点，如果我必须采取单选按钮的流量。

因此，在本质上，如果我有这样的：

#content { visibility:hidden } 
 
#cb:checked ~ #content { visibility:visible }

<input type="checkbox" id="cb">  
 
<div id="content">stuff</div>

有没有办法翻转输入和div的顺序，仍然有它的工作？

Answer 1

不，没有“以前的兄弟姐妹”（也不是“父母/祖先”）组合者。

理论上，如果您愿意使用flexbox，那么您可以使用order属性交换显示顺序，同时保留DOM顺序。这里的总体思路（未测试）：

#container { display: flex; } 
#content { visibility:hidden; order: 1; } 
#cb  { order: 2; } 
#cb:checked ~ #content { visibility:visible } 

<div id="container"> 
    <input type="checkbox" id="cb">  
    <div id="content">stuff</div>  
</div> 

普通免责声明适用于对Flexbox的浏览器的支持。

顺便说一下，“tilde thingy”的名称是“一般兄弟组合”。