Html CSS选择器不工作

因此，在我的设计中，我有一个关于css选择器的问题

我试图通过css处理复选框，在复选框被选中或未选中时，使用多个选择器（如“+”、“~”等）执行事件

我不明白为什么这不起作用，或者用“~”来代替，因为根据我的理解，“+”选择与它匹配的元素直接在第一个元素之后，而“~”选择在前一个元素之后的每个元素。这是我第一次玩它，所以我不是最好的…但我正试图用我的头围绕它。当串接多个选择器时，“元素”：选中是否不算作参考点？我留了两个在JSFIDLE上试过的

虽然这是打算在以后作为一个导航菜单，但我只是暂时将其保留下来，以便先了解选择器的用法

HTML

谢谢

编辑：伙计，你们太苛刻了xD是的，当我修改代码时，我确实犯了一些错误，把它复制粘贴到这里和我的代码中。是我的错。这里是原始问题的更新版本供参考。我在这里也更新了HTML/CSS。谢谢你更新了小提琴。我会给你，但因为这是一个评论，而不是一个答复，我会接受其他人的，因为这也是另一种方式。谢谢：D

---

您的代码不工作，因为

+

（）选择紧跟其后的元素。在这种情况下，复选框后面的直接元素是您的

#drawer\u open

标签

，而不是

导航

相邻同级选择器这称为相邻选择器或下一同级选择器。它将只选择紧跟在前一个指定元素之后的指定元素

您的标签似乎有不正确的缩进，因此可能这使您认为

nav

是直接同级。在任何情况下，您都需要使用（

~

）

实现所需的正确代码是：

#navigation_drawer:checked ~ #navigation{
  background-color: red;
}

---

我看不到您的HTML代码中有

id=“wrapper”

。实际上我称之为“Container”，但在复制和粘贴时，我错过了结束部分。对不起。勾选OPOW的this:，如果您绝对要定位标签，则不需要在复选框后面。或者只使用您的兄弟选择器：请更新您的问题中的代码、HTML和CSS。不要指望我们在互联网上到处寻找你的代码来帮助你。如需指导，请阅读“”和“”指南。是的，你明白了。我想当我将包装器更改为容器xD oops时，我会感到困惑。谢谢：谢谢您的澄清：）

label#drawer_open{
   position: absolute;
   top: 2;
   right: 0;
   margin-right: 1rem;
   background-image: url('http://i.imgur.com/Nxafddw.png');
   background-image: no-repeat;
   width: 35px;
   height: 23px;
}

#navigation{
  background-color:blue;
}

#navigation_drawer:checked + #container #navigation{
  background-color:red;
}

#navigation_drawer:checked + container #navigation{
  background-color:red;
}

#navigation_drawer:checked ~ #navigation{
  background-color: red;
}