CSS中的复选框条件

Question

我正在尝试设计一个响应式菜单。

这是我的代码：

#web-menu {
  max-width: 1235px;
  width: 100%;
  margin: 0 auto;
  background: #444;
  text-align: left;
  font-weight: bold;
  overflow: hidden;
  padding: 0 15px 0 15px;
  display: block;
}
#web-menu li {
  list-style: none;
  float: left;
}
#web-menu li a {
  color: #fff;
  background: #444;
  text-decoration: none;
  line-height: 37px;
  padding: 0 15px 0 15px;
  display: block;
}
#web-menu li > ul {
  display: none;
  width: 20em;
  /* Width to help Opera out */
  z-index: 10;
  font-weight: normal;
}
#web-menu li:hover > ul {
  display: block;
  position: absolute;
  margin: 0;
  padding: 0;
}
#web-menu li:hover li {
  float: none;
  border-bottom: 1px solid #fff;
}
#web-menu a:hover {
  color: #FFFFFF;
  background: #1a1a1a;
}
#web-menu a:active {
  background: #444;
  /*turns this color briefly when link is selected*/
  color: #FFFFFF;
}
@media only screen and (max-width: 900px),
only screen and (max-device-width: 900px) {
  #web-menu {
    display: none;
  }
  #web-menu li:hover > ul {
    display: none;
  }
  #web-menu li {
    width: 100%;
  }
  [id=main-mobile-menu]:checked ~ #web-menu {
    display: block;
  }
  [id=mobile-menu-1]:checked + #web-menu li > ul {
    display: block;
  }
}

<label for="main-mobile-menu">Show Menu</label>
<input type="checkbox" id="main-mobile-menu" role="button">

<ul id="web-menu">
  <li id="web-menu-home"><a href="index.php">Home</a>
  </li>

  <li>
    <input type="checkbox" id="mobile-menu-1" role="button">
    <label for="mobile-menu-1" class="mobile-menu1">Show Menu</label>
    <a href="#">E-Resources</a>
    <ul>
      <li id="web-menu-top"><b>Resources</b>
      </li>
      <li id="web-menu-cdcs"><a href="/index.php?page_id=39">Tests</a>
      </li>
    </ul>
  </li>
</ul>

问题是，只有相关的css id不是li时，复选框标签才有效。我知道哪里出错了？

提前感谢您的帮助！

Answer 1

有几个问题：

1. 您使用了+选择器，这需要<ul>紧跟#mobile-menu-1。将此更改为~可解决该问题。
2. 您有一个特殊性问题，其中[id=mobile-menu-1]:checked ~ ul（21）不足以覆盖#web-menu li > ul（102）。给<ul> ID并更新选择器就可以了。

（我使用https://specificity.keegan.st/来计算特异性。）

#web-menu {
  max-width: 1235px;
  width: 100%;
  margin: 0 auto;
  background: #444;
  text-align: left;
  font-weight: bold;
  overflow: hidden;
  padding: 0 15px 0 15px;
  display: block;
}
#web-menu li {
  list-style: none;
  float: left;
}
#web-menu li a {
  color: #fff;
  background: #444;
  text-decoration: none;
  line-height: 37px;
  padding: 0 15px 0 15px;
  display: block;
}
#web-menu li > ul {
  display: none;
  width: 20em;
  /* Width to help Opera out */
  z-index: 10;
  font-weight: normal;
}
#web-menu li:hover > ul {
  display: block;
  position: absolute;
  margin: 0;
  padding: 0;
}
#web-menu li:hover li {
  float: none;
  border-bottom: 1px solid #fff;
}
#web-menu a:hover {
  color: #FFFFFF;
  background: #1a1a1a;
}
#web-menu a:active {
  background: #444;
  /*turns this color briefly when link is selected*/
  color: #FFFFFF;
}
@media only screen and (max-width: 900px),
only screen and (max-device-width: 900px) {
  #web-menu {
    display: none;
  }
  #web-menu li:hover > ul {
    display: none;
  }
  #web-menu li {
    width: 100%;
  }
  [id=main-mobile-menu]:checked ~ #web-menu {
    display: block;
  }
  [id=mobile-menu-1]:checked ~ #sub-menu {
    display: block;
  }
}

<label for="main-mobile-menu">Show Menu</label>
<input type="checkbox" id="main-mobile-menu" role="button">

<ul id="web-menu">
  <li id="web-menu-home"><a href="index.php">Home</a>
  </li>

  <li>
    <input type="checkbox" id="mobile-menu-1" role="button">
    <label for="mobile-menu-1" class="mobile-menu1">Show Menu</label>
    <a href="#">E-Resources</a>
    <ul id="sub-menu">
      <li id="web-menu-top"><b>Resources</b>
      </li>
      <li id="web-menu-cdcs"><a href="/index.php?page_id=39">Tests</a>
      </li>
    </ul>
  </li>
</ul>