html - 无法让我的 css 选择器正常工作

Question

我的 CSS 代码中的最后一个 :checked 调用不起作用。当单击汉堡包图标时，我希望能够将 .nav-bar-element 从屏幕外移动到它们现在所在的位置，但我似乎无法获得选择器工作。

@import url('https://fonts.googleapis.com/css?family=Raleway');
 body {
  background-image: url(http://www.hayesandjarvis.co.uk/medias/sys_master/hcf/hbb/8912480731166.jpg);
  min-height: 100%;
  position: relative;
  opacity: 0.75;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  font: 400 15px/1.8"Raleway", sans-serif;
  color: #777;
}
.nav-bar {
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.2);
  width: 100vw;
  height: 64px;
  overflow: hidden;
  position: absolute;
  font-weight: bold;
  font-size: 18px;
}
.nav-bar:hover {
  background-color: rgba(255, 255, 255, 0.6);
  -webkit-transition: 0.4s ease, width 0.3s ease;
  transition: 0.4s ease, width 0.3s ease;
}
.nav-content {
  position: absolute;
  right: 0px;
  float: right;
  height: 64px;
  width: 512px;
  color: #000;
}
.nav-content .nav-bar-element {
  float: left;
  margin: 0px;
  width: 100px;
  height: 32px;
  margin: 16px 25px 16px 25px;
}
.nav-content .nav-bar-element a {
  width: 100px;
  height: 32px;
  text-decoration: none;
  color: #000;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#nav-button {
  display: none;
}
.menu-button {
  z-index: 101;
  vertical-align: baseline;
  position: absolute;
  height: 48px;
  width: 48px;
  top: 8px;
  right: 25px;
}
.bar {
  position: absolute;
  height: 2px;
  width: 66%;
  background-color: #000;
  left: 20%;
  -webkit-transition: 0.4s ease, width 0.3s ease;
  transition: 0.4s ease, width 0.3s ease;
}
.bar:nth-child(1) {
  top: 24%;
}
.bar:nth-child(2) {
  top: 47%;
}
.bar:nth-child(3) {
  top: 47%;
}
.bar:nth-child(4) {
  top: 71%;
}
#nav-button:checked+ .menu-button .bar:nth-child(1) {
  width: 0px;
}
#nav-button:checked+ .menu-button .bar:nth-child(2) {
  -webkit-transform: translateX(-50%) rotate(45deg);
  transform: rotate(45deg);
}
#nav-button:checked+ .menu-button .bar:nth-child(3) {
  -webkit-transform: translateX(-50%) rotate(-45deg);
  transform: rotate(-45deg);
}
#nav-button:checked+ .menu-button .bar:nth-child(4) {
  width: 0px;
}
#nav-button:checked+ #change-me {
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="bgimg-1">
  <!--<div class="nav-bar-bg"></div>-->
  <div class="nav-bar">
    <input type="checkbox" id="nav-button" />
    <label for="nav-button" class="menu-button">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </label>

    <div class="nav-content" id="change-me">
      <div class="nav-bar-element"><a href="#projects"><i class="fa fa-rocket" aria-hidden="true"></i> Projects</a>
      </div>
      <div class="nav-bar-element"><a href="#about-me"><i class="fa fa-user" aria-hidden="true"></i> About Me</a>
      </div>
      <div class="nav-bar-element"><a href="#contact"><i class="fa fa-inbox" aria-hidden="true"></i> Contact</a>
      </div>
    </div>
  </div>
</div>

Answer 1

我需要眼镜，它是一个兄弟，但不是相邻的兄弟，所以使用 ~ 而不是 +

或

在复选框和标签之间使用+，在标签和#change-me之间使用+，

删除最后一个规则集上的 +，因为 #change-me 是 #nav-button 的子项，而不是 na兄弟。

好吧，我终于得到了足够的特异性!使用这个:

  #nav-button:checked ~ .nav-content#change-me * {
      color: #fff;
    }

片段

@import url('https://fonts.googleapis.com/css?family=Raleway');
 body {
  background-image: url(http://www.hayesandjarvis.co.uk/medias/sys_master/hcf/hbb/8912480731166.jpg);
  min-height: 100%;
  position: relative;
  opacity: 0.75;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  font: 400 15px/1.8"Raleway", sans-serif;
  color: #777;
}
.nav-bar {
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.2);
  width: 100vw;
  height: 64px;
  overflow: hidden;
  position: absolute;
  font-weight: bold;
  font-size: 18px;
}
.nav-bar:hover {
  background-color: rgba(255, 255, 255, 0.6);
  -webkit-transition: 0.4s ease, width 0.3s ease;
  transition: 0.4s ease, width 0.3s ease;
}
.nav-content {
  position: absolute;
  right: 0px;
  float: right;
  height: 64px;
  width: 512px;
  color: #000;
}
.nav-content .nav-bar-element {
  float: left;
  margin: 0px;
  width: 100px;
  height: 32px;
  margin: 16px 25px 16px 25px;
}
.nav-content .nav-bar-element a {
  width: 100px;
  height: 32px;
  text-decoration: none;
  color: #000;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#nav-button {
  display: none;
}
.menu-button {
  z-index: 101;
  vertical-align: baseline;
  position: absolute;
  height: 48px;
  width: 48px;
  top: 8px;
  right: 25px;
}
.bar {
  position: absolute;
  height: 2px;
  width: 66%;
  background-color: #000;
  left: 20%;
  -webkit-transition: 0.4s ease, width 0.3s ease;
  transition: 0.4s ease, width 0.3s ease;
}
.bar:nth-child(1) {
  top: 24%;
}
.bar:nth-child(2) {
  top: 47%;
}
.bar:nth-child(3) {
  top: 47%;
}
.bar:nth-child(4) {
  top: 71%;
}
#nav-button:checked+ .menu-button .bar:nth-child(1) {
  width: 0px;
}
#nav-button:checked+ .menu-button .bar:nth-child(2) {
  -webkit-transform: translateX(-50%) rotate(45deg);
  transform: rotate(45deg);
}
#nav-button:checked+ .menu-button .bar:nth-child(3) {
  -webkit-transform: translateX(-50%) rotate(-45deg);
  transform: rotate(-45deg);
}
#nav-button:checked+ .menu-button .bar:nth-child(4) {
  width: 0px;
}
#nav-button:checked ~ .nav-content#change-me * {
  color: #fff;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sam Erickson</title>
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

  <div class="bgimg-1">
    <!--<div class="nav-bar-bg"></div>-->
    <div class="nav-bar">
      <input type="checkbox" id="nav-button" />
      <label for="nav-button" class="menu-button">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </label>

      <div class="nav-content" id="change-me">
        <div class="nav-bar-element"><a href="#projects"><i class="fa fa-rocket" aria-hidden="true"></i> Projects</a>
        </div>
        <div class="nav-bar-element"><a href="#about-me"><i class="fa fa-user" aria-hidden="true"></i> About Me</a>
        </div>
        <div class="nav-bar-element"><a href="#contact"><i class="fa fa-inbox" aria-hidden="true"></i> Contact</a>
        </div>
      </div>
    </div>

</body>

</html>