Checkbox Hack-标记样式

Question

我在使用基本的复选框hack样式化标签时遇到麻烦。 选中复选框后，我希望标签的背景变为绿色。 但是，我似乎找不到能对指定元素进行样式设置的CSS选择器。 我尝试使用~和+ 。 这是我的代码：

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

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

谢谢您的帮助！

Answer 1

input不需要在复选框功能的标签后面即可使用。 只需在HTML中切换input和label ：

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

 <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 

Answer 2

前一个元素没有选择器，下一个（或多个）元素没有选择器，因此您需要在输入之后而不是之前使用标签。