显示：none 不适用于复选框 css

Question

我有一个问题，一切正常，但显示：none 复选框不存在，复选框仍然存在我尝试通过 html 属性设置样式（我知道这不是一件好事，但我已准备好接受任何解决方案），它有效，但滑动 in/out 停止工作....我该怎么办？

 <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>Document</title>
    </head>
    
    <style type="text/css">
     
     
     * {padding:0; margin:0;} 
      body { font-family:sans-serif; } 
    
      a { text-decoration: none; 
       color:#00a5cc; } 
    
      li { list-style-type:none; } 
     header { height : 50px; 
       margin:auto; 
       width : 100%;
        border-bottom:1px solid #EEE; } 
    
       #brand { float:left; 
        line-height:50px;
         color:#E5DAC0; 
         font-size:25px;
          font-weight:bolder; } 
    
       nav { width:100%; text-align:center; } 
       nav a { display:block; padding: 15px 0;
        border-bottom: 1px solid #C3AA6E; color:#F0EADC; } 
    
    
       nav a:hover { background:#E5DAC0; 
        color :#FFF; } 
    
       nav li:last-child a { border-bottom:none; } 
    
    
     /**************************************************************
     **************************************************************/
    
     .menu{
      width: 240px;
      height: 100%;
      position: absolute;
      background: #a9a1f3;
      left: -240px;
      trensition: all .3s ease-in-out;
      -webkit-transition: all .3s ease-in-out;
          -moz-transition: all .3s ease-in-out; 
          -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; 
    
     }
    
    .menu-icon{
     padding: 10px 20px;
     background: #000000;
     color: #aa25e9;
     cursor:pointer; 
       float:right; 
       margin-top:4px; 
       border-radius:5px; } 
    }
    #menuToggle{
     display: none;
    }
    #menuToggle:checked ~ .menu { position:absolute; left:0px; }
    </style>
    <body>
    <input type="checkbox" id="menuToggle">
    <label for="menuToggle" class="menu-icon">&#9776</label>
     <header>
      <div id="brand"> slide in out nav</div>
     </header>
    
     <nav class="menu">
      <ul>
       <li><a href="#">HOME</a></li> 
            <li><a href="#">ABOUT</a></li>
             <li><a href="#">WORK</a></li> 
             <li><a href="#">INSPIRATION</a></li> 
             <li><a href="#">BLOG</a></li> 
             <li><a href="#">CONTACT</a></li> 
      </ul>
    
     </nav>
    </body>
    </html>

Answer 1

您的 css 在 .menu-icon 有一个错误它有一个额外的 }，这就是它不起作用的原因。

只需删除多余的 } 即可正常工作。

现场示例：https://jsfiddle.net/ay84zjjw/

希望对您有所帮助。

Answer 2

只是一个小错误，代码中多了一个 }。

.menu-icon{
    padding: 10px 20px;
    background: #000000;
    color: #aa25e9;
    cursor:pointer; 
    float:right; 
    margin-top:4px; 
    border-radius:5px; **}** 
}

 <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>Document</title>
    </head>
    
    <style type="text/css">
     
     
     * {padding:0; margin:0;} 
      body { font-family:sans-serif; } 
    
      a { text-decoration: none; 
       color:#00a5cc; } 
    
      li { list-style-type:none; } 
     header { height : 50px; 
       margin:auto; 
       width : 100%;
        border-bottom:1px solid #EEE; } 
    
       #brand { float:left; 
        line-height:50px;
         color:#E5DAC0; 
         font-size:25px;
          font-weight:bolder; } 
    
       nav { width:100%; text-align:center; } 
       nav a { display:block; padding: 15px 0;
        border-bottom: 1px solid #C3AA6E; color:#F0EADC; } 
    
    
       nav a:hover { background:#E5DAC0; 
        color :#FFF; } 
    
       nav li:last-child a { border-bottom:none; } 
    
    
     /**************************************************************
     **************************************************************/
    
     .menu{
      width: 240px;
      height: 100%;
      position: absolute;
      background: #a9a1f3;
      left: -240px;
      trensition: all .3s ease-in-out;
      -webkit-transition: all .3s ease-in-out;
          -moz-transition: all .3s ease-in-out; 
          -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; 
    
     }
    
    .menu-icon{
     padding: 10px 20px;
     background: #000000;
     color: #aa25e9;
     cursor:pointer; 
       float:right; 
       margin-top:4px; 
       border-radius:5px;
    }
    #menuToggle{
     display: none;
    }
    #menuToggle:checked ~ .menu { position:absolute; left:0px; }
    </style>
    <body>
    <input type="checkbox" id="menuToggle">
    <label for="menuToggle" class="menu-icon">&#9776</label>
     <header>
      <div id="brand"> slide in out nav</div>
     </header>
    
     <nav class="menu">
      <ul>
       <li><a href="#">HOME</a></li> 
            <li><a href="#">ABOUT</a></li>
             <li><a href="#">WORK</a></li> 
             <li><a href="#">INSPIRATION</a></li> 
             <li><a href="#">BLOG</a></li> 
             <li><a href="#">CONTACT</a></li> 
      </ul>
    
     </nav>
    </body>
    </html>

显示：none 不适用于复选框 css

display: none does not work with checkbox css

html

css

navbar