为什么我不能让这个输入元素作用于我的 html？答案

【问题标题】：Why can't I get this input element to act on my html?为什么我不能让这个输入元素作用于我的 html？
【发布时间】：2016-10-30 04:11:06
【问题描述】：

我的目标：创建夜间模式按钮，将网站颜色更改为较深的颜色。

方法：我使用了一个与输入元素相关联的标签元素，该元素在激活时会改变网站内任何内容的颜色。（想想一个“夜间模式”按钮，它会使夜间读者整个网站变暗）。

谁能告诉我为什么我想出的代码不起作用？我已经与其他编码人员进行了交叉检查，但我们不明白为什么……这可能非常简单。

* {
  color:red;
  margin: 0 auto;
  font-family: 'Raleway', sans-serif;
}
.wrapper {
  width:80%;
  height:100%;
  margin:0 auto;
  border: 1px solid rgb(22, 36, 218);
}
.header{
  height:60px;
}
.nav {
  height:30px;
  border: 1px solid rgb(0,0,0);
}
input#Color {
  position:absolute;
}
input#Color:checked + .nav {
  background-color: rgb(0,0,0);
}

<!DOCTYPE html>
<!-- DOCKMANN INDEX PAGE - CODE: D001 -->
<html>

<head>
<!-- CSS --><link rel="stylesheet" type="text/css" href="stylesheet.css" />
<!-- JS --><script src="script.js"></script>

  <link href="https://fonts.googleapis.com/css?family=Raleway:300" rel="stylesheet">
</head>
    <!-- END HEAD -->
<body>
  <label for="Color">Poop</label>
  <input type="checkbox" id="Color"/>
 <div class="wrapper">
    <div class="header">
      test header
    </div>
    <!-- end header -->
    <div class="nav">
      <p>
        test nav
      </p>
    </div>
    <!-- end nav -->
    <div class="content">
      test content
      <div class="mainContent">
        mainContent
      </div>
      <div class="sidebar">
        Sidebar
      </div>
    </div>
    <!-- end content -->
    <div class="footer">
      test footer
    </div>
    <!-- end footer -->
 </div>
 <!-- end wrapper -->
</body>

</html>

【问题讨论】：

标签： html css input label

【解决方案1】：

这是因为 .nav 嵌套在 .wrapper 中，并且 CSS 期望它是兄弟姐妹。

试试

input#Color:checked + .wrapper

或者如果您只想影响导航；

input#Color:checked + .wrapper .nav

【讨论】：

Here's 小提琴演示。打败我一点:)
谢谢你罗斯，帮助一个菜鸟！你修好了。
对不起@AndrewLi :) 你也竭尽全力制作小提琴！