如何在 CSS 中正确使用 checkbox:checked 属性？答案

【问题标题】：How to use the checkbox:checked attribute properly in CSS?如何在 CSS 中正确使用 checkbox:checked 属性？
【发布时间】：2021-06-05 19:09:21
【问题描述】：

我在使用众所周知的 CSS 复选框技巧时遇到了一点问题。我正在尝试制作一个响应式导航栏。

我以前用过，以前可以用，但是现在即使我复制以前有效的旧代码，现在它也根本不起作用。

这是我制作的代码：

.hamburger {
  width: 35px;
  height: 40px;
}

.responsive-nav-div {
  position: absolute;
  left: -100%;
  width: 100%;
}

.responsive-nav~.responsive-nav-div {
  left: 0px;
}

<div class="main-nav-div">
  <div class="nav-div-1">
    <ul class="nav-ul">
      <li class="nav-li"><a class="nav-a" href="index.php">HOMEPAGE<a/></li>
            </ul>
        </div>
        <div class="nav-div-2">
            <ul class="nav-ul-2">
                <li class="nav-li"><a class="nav-login-register" href="login.php">LOGIN<a/></li>
            </ul>
        </div>
    </div>
        
    <div class="responsive-nav-main-div">
        <label for="responsive-nav" class="responsive-nav-label"><img  class="hamburger" src="images/hamburger2.png" alt="Responsive-NAV"></label>
        <input type="checkbox" id="responsive-nav" class="responsive-nav">
        <div class="responsive-nav-div">
            <ul class="responsive-nav-ul">
                <li class="responsive-li2"><a class="responsive-a2" href="index.php">HOMEPAGE<a/></li>
                <li class="responsive-li2"><a class="responsive-a2" href="login.php">LOGIN<a/></li>
            </ul>
        </div>
    </div>

当我点击复选框或汉堡图标（标签）时，它根本不适用left: 0px;。这太烦人了，我现在试图让它工作大约 3 个小时，我错过了什么？

在你问之前，是的，我已经清除了网络浏览器缓存以防万一。

我真的不打算将 javascript 用于以前有效的 hack，所以请不要建议使用 javascript！

任何与:checked 属性相关的帮助都会有所帮助，谢谢：D！

【问题讨论】：

您忘记设置:checked。试试这样 - .responsive-nav:checked ~ .responsive-nav-div{}
哎呀，现在我忘记了，但我以前有过这样的，现在我添加了:checked，但它仍然没有切换任何东西，我什至尝试改变其他东西的背景颜色，只是为了看看它是否有效，但没有。
无法真正重现问题。在fiddle 中似乎一切正常
哇，这很有趣，有没有可能是其他东西影响了代码？ CSS 代码的顺序重要吗？
我不敢相信，我已经删除了导航栏（没有响应的那个），现在它切换了链接，所以看起来它与其他导航有关。谢谢队友：D！

标签： html css checkbox

【解决方案1】：

它有一个简单的错字，这就是 CSS 设计无法正常工作的原因：

在这条线上你有

<li class="nav-li"><a class="nav-login-register" href="login.php">LOGIN<a/></li>

在零件上LOGIN<a/></li> 有一个拼写错误</a>

.hamburger {
  width: 35px;
  height: 40px;
}

.responsive-nav-div {
  position: absolute;
  left: -100%;
  width: 100%;
}

.responsive-nav:checked ~ .responsive-nav-div{
    left: 0px;
}

<div class="main-nav-div">
  <div class="nav-div-1">
    <ul class="nav-ul">
      <li class="nav-li"><a class="nav-a" href="index.php">HOMEPAGE<a/></li>
            </ul>
        </div>
        <div class="nav-div-2">
            <ul class="nav-ul-2">
                <li class="nav-li"><a class="nav-login-register" href="login.php">LOGIN</a></li>
            </ul>
        </div>
    </div>
        
    <div class="responsive-nav-main-div">
        <label for="responsive-nav" class="responsive-nav-label"><img  class="hamburger" src="images/hamburger2.png" alt="Responsive-NAV"></label>
        <input type="checkbox" id="responsive-nav" class="responsive-nav">
        <div class="responsive-nav-div">
            <ul class="responsive-nav-ul">
                <li class="responsive-li2"><a class="responsive-a2" href="index.php">HOMEPAGE<a/></li>
                <li class="responsive-li2"><a class="responsive-a2" href="login.php">LOGIN<a/></li>
            </ul>
        </div>
    </div>

【讨论】：