CSS选择器

Question

所以我有一些HTML的，我有一个导航栏隐藏关屏幕上，直到顶部的复选框：通过点击标签（汉堡包PNG），此时将其托运回来在屏幕上直到再次点击汉堡包图标为止，并且导航菜单再次隐藏在屏幕外。

现在，如果我要将nav部分粘贴到头部中，我可以使用选择器（+和〜）来定位它...但我无法想出一种方法来实现这一点，当它是一个新的div不是紧挨在复选框旁边，而是在父母之外的自己的div中。他们唯一的共同点就是#wrapper，不是吗？但我无法弄清楚如何从另一个div内定位目标。

是否有一个目标在这个纯CSS使导航菜单弹出时复选框办法：检查，回来时，它未核对？我已经有JavaScript了，但我也想用CSS来解决，以防万一，你知道......用户禁用了JavaScript。

HTML

<div id="wrapper"> 
    <header> 
    <a href="#" id="logo">TitleBar</a> 
    <label for="hamburger" id="nav_open_icon"><img src="http://i.imgur.com/vv4Rdc9.png" alt="open-menu"></label> 
    <label for="hamburger" id="nav_close_icon"><img src="/img/hamburger/close.png" alt="close-menu"></label> 
    <input type="checkbox" id="hamburger"> 
    <div id="overlay"></div> 
    </header> 

    <nav> 
    <ul> 
     <li id="#"><a href="#">Home</a><img src="/img/home.png" alt="Home"></li> 
     <li id="#"><a href="#">Stuff</a><img src="/img/about.png" alt="About"></li> 
    </ul> 
    </nav> 
</div> 

CSS

body{ 
     color: white; 
     background-color: black; 
     font-family: "PT Sans", "sans-serif"; 
     font-size: 1rem; 
    } 

    #container{ 
     margin: 0 auto; 
     min-width: 320px; 
     max-width: 1600px; 
    } 

    h1,h2,h3,h4,h5,h6{ 
     color:#FEBC11; 
     text-align: center; 
    } 

    header{ 
     padding: 1rem 0rem 1rem 0rem; 
     background-color: #333; 
    } 

    #logo{ 
     color:#FEBC11; 
     font-size: 1rem; 
     text-decoration: none; 
     margin-left: .5rem; 
     font-weight: bold; 
    } 

    #nav_open_icon{ 
     position: absolute; 
     top: 1rem; 
     right: 0; 
     margin-right: 1rem; 
     width: 30px; 
     height: 23px; 
    } 

    #nav_close_icon{ 
     display: none; 
     position: absolute; 
     right: 0; 
     top: 0.6rem; 
     width: 30px; 
     height: 30px; 
     margin-right: 1rem; 
    } 

    #hamburger{ 
     /*display: none;*/ 
    } 

    #overlay{ 

    } 

    nav{ 
     position: absolute; 
     left: -50%; 
     background-color:rgba(124,115,115,.2); 
     width: 10rem; 
    } 

    .nav_toggle{ 
     position: absolute; 
     left: 0%; 
     background-color:rgba(51,51,51,1); 
     } 

    #hamburger:checked nav + nav_toggle{ 

} 

    nav ul{ 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
    } 

    nav li{ 
     padding: 1.1rem; 
    } 

    nav a{ 
     color: white; 
     text-decoration: none; 
     margin-left: 1rem; 
    } 

    nav img{ 
     float: left; 
     margin: -.5rem 0rem 0rem -.2rem; 
     height: 35px; 
     width: 35px; 
    } 

https://jsfiddle.net/zaL594s8/

Answer 1

不能从目标与CSS的复选框nav，因为它是包含复选框header之外。是否有任何理由，你不能移动导航的header内，这样做：

JS Fiddle

nav { 
    position: absolute; 
    left: -50%; 
    background-color: rgba(124, 115, 115, .2); 
    width: 10rem; 
    transition: .3s; 
} 

input:checked + nav { 
    position: absolute; 
    left: 0%; 
    background-color: rgba(51, 51, 51, 1); 
}