Question

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

方法：我使用了一个绑定到输入元素的标签元素，该元素在激活时会改变网站内部任何内容的颜色。（想想一个＆＃34;夜间模式＆＃34;按钮会使整个网站变暗以供夜间读者使用。）

有人可以告诉我为什么我提出的代码无效吗？我已经与其他程序员进行了交叉检查，我们不明白为什么......这可能是非常简单的事情。

＆＃13;

* {
  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);
}

＆＃13;

<!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>

＆＃13;

Answer 1

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

尝试

input#Color:checked + .wrapper

或者您只想让导航受影响;

input#Color:checked + .wrapper .nav

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

1 个答案: