在兄弟姐妹上使用 CSS '+'选择器不起作用

Question

我正在制作一个纯CSS动画导航栏，使用复选框作为汉堡菜单切换符，用：checked和+选择器更改各种元素，我已经开始处理grand-child元素，但不是兄弟元素，我在网上也没有找到合适的解决方案。这是我的HTML代码，显然有点精简：

.toggler:checked+.menu {
width: 350px;
}

<div class="menu">
<div class="menu-background"></div>
<div class="menu-navigation"></div>
</div>
<input type="checkbox" class="toggler">
<div class="hamburger">

我把它用于汉堡班的孩子，所以我很有信心这是选择器的问题

Answer 1

只需将复选框输入置于"上方即可；。菜单"；classdiv.那么它会很好用的。我只是添加了一些背景和文本来显示结果。希望这对你有帮助

.menu {
background-color: red;
}
.toggler:checked+.menu {
width: 350px;
}

<input type="checkbox" class="toggler">
<div class="menu">
abc
<div class="menu-background"></div>
<div class="menu-navigation"></div>
</div>

<div class="hamburger">

Answer 2

尝试使用~而不是+，看看它是否有助于

Answer 3

CSS中有两个同级选择器：

• +选择下一个同级
• ~选择以下任何同级

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