Html 使用CSS'+'；同级上的选择器不工作

我正在制作一个纯CSS动画导航栏，使用复选框作为汉堡包菜单切换器，使用：checked和+选择器更改各种元素，我已经在grand child元素上进行了操作，但没有兄弟姐妹，我也没有在web上找到适当的解决方案。这是我的HTML代码，显然有点精简：

.toggler:选中+菜单{
宽度：350px；
}

尝试使用

~

而不是

+

来查看它是否有助于您

CSS中有两个同级选择器：

• +

  选择下一个同级并

• ~

  选择以下任何兄弟姐妹

---

到目前为止，CSS中没有以前的同级选择器，因此您必须更改元素的顺序或使用JavaScript。

只需将复选框输入置于“.menu”类div上方。然后它就可以正常工作了。 我只是添加了一些背景和文本来显示结果。 希望这对你有帮助

菜单{
背景色：红色；
}
.切换开关：选中+.菜单{
宽度：350px；
}

abc

我确实尝试过使用~，但似乎不起作用。我在某个地方读到，它只针对下一个同级，而不是前一个同级，我怀疑这可能是原因是肯定的，如果我记得很清楚，您不能使用选择器对元素父级或前一个同级进行更改。我建议您为此使用一些javascript或jquery。