无法使我的css选择器正常工作

时间：2017-01-03 03:19:34

标签： html css twitter-bootstrap

我的css代码中的最后:checked次调用无效。我希望能够让.nav-bar-element从屏幕移动到现在点击汉堡包图标的位置，但我似乎无法让选择器正常工作。< / p>

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

我需要眼镜是兄弟姐妹，但不是相邻的兄弟姐妹，所以请使用~代替+

OR

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

删除最后一个规则集上的+，因为#change-me是#nav-button的孩子，而不是同胞。

好的，我终于有了足够的特异性！使用此：

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

相关问题
最新问题