Html 启用动画复选框：选中“不工作”

因此，我在纯CSS中制作了一个响应导航栏，当我的复选框被选中时，每个转换都会起作用：但不是我标签的框阴影的颜色，我用它作为复选框的汉堡按钮

我想知道为什么，你能帮我吗？我把代码弄得一团糟：CSS末尾的最后一个属性是不起作用的属性

此外，当导航栏展开时，导航栏不透明度的文本会设置动画，但当导航栏折叠时，则不会设置动画：s此处是属性不起作用

#navbar-nav {
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    position: relative;
    list-style-type: none;
    transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
}

#show-menu:checked + #navbar #navbar-nav {
    visibility: visible;
    opacity: 1;
    transition: opacity .2s ease-in-out .2s;
    -webkit-transition: opacity .2s ease-in-out .2s;
}

---

这是我第一次通过复选框仅在CSS中触发事件：）提前感谢

问题出在我的html中，而不是CSS中

#show-menu:checked + **#navbar** .show-menu:before {
background: #9F6C66;
box-shadow: 0 9px 0px 0 #9F6C66, 0 18px 0 0 #9F6C66;
transition: .2s ease-in-out;
-webkit-transition: .2s ease-in-out;
}

我必须把按钮放在导航栏的末尾，并精确地放在CSS中

#show-menu:checked + **#navbar** .show-menu:before {
background: #9F6C66;
box-shadow: 0 9px 0px 0 #9F6C66, 0 18px 0 0 #9F6C66;
transition: .2s ease-in-out;
-webkit-transition: .2s ease-in-out;
}

它解决了我所有的问题，我还编辑了小提琴