复选框黑客 - 标签的样式

Question

我无法使用基本的复选框黑客来标记我的标签。选中复选框后，我希望标签的背景更改为绿色。但是，我似乎无法找到一个CSS选择器来设置一个元素，该元素继续执行指定的元素。我尝试过使用~和+。这是我的代码：

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  font-family: monospace;
}

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  position: relative;
  cursor: pointer;
  display: block;
  height: 70px;
  width: 70px;
  background: #eee;
  padding-top: 22px;
  border-radius: 1px;
  z-index: 1;
}

label span {
  display: block;
  height: 4px;
  width: 27px;
  background: #333;
  margin: 4px auto;
  border-radius: 1px;
}

nav {
  position: absolute;
  top: 0;
  opacity: 0;
  display: flex;
  background-color: #18bc9c;
  width: 100%;
  text-align: center;
  line-height: 80px;
  font-size: 2em;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease-in-out;
}

input[type=checkbox]:checked ~ nav {
  opacity: 1;
}

input[type=checkbox]:checked + label {
  background: #18bc9c !important;
}

＆＃13;

<label for="nav">
  <span></span>
  <span></span>
  <span></span>
</label>
<input type="checkbox" id="nav">
<nav>
  <p>Home</p>
  <p>About</p>
  <p>Contact</p>
</nav>

＆＃13;

＆＃13;

＆＃13;

感谢您的帮助！

Answer 1

input不需要在复选框功能的标签之后工作。只需在HTML中切换input和label：

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  font-family: monospace;
}

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  position: relative;
  cursor: pointer;
  display: block;
  height: 70px;
  width: 70px;
  background: #eee;
  padding-top: 22px;
  border-radius: 1px;
  z-index: 1;
}

label span {
  display: block;
  height: 4px;
  width: 27px;
  background: #333;
  margin: 4px auto;
  border-radius: 1px;
}

nav {
  position: absolute;
  top: 0;
  opacity: 0;
  display: flex;
  background-color: #18bc9c;
  width: 100%;
  text-align: center;
  line-height: 80px;
  font-size: 2em;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease-in-out;
}

input[type=checkbox]:checked~nav {
  opacity: 1;
}

input[type=checkbox]:checked+label {
  background: #18bc9c !important;
}

＆＃13;

<input type="checkbox" id="nav">
<label for="nav">
  <span></span>
  <span></span>
  <span></span>
</label>
<nav>
  <p>Home</p>
  <p>About</p>
  <p>Contact</p>
</nav>
Run code snippetCopy snippet to answer

＆＃13;

＆＃13;

＆＃13;

Answer 2

前面的元素没有选择器，只有下一个元素（或元素），所以你需要在输入之后使用标签，而不是之前。