tilda選擇器的CSS，標籤按鈕不工作的響應菜單

我的問題是我想創建響應式菜單，每件事情都很好，之後，我做了什麼我隱藏我的菜單，並顯示一個按鈕時，屏幕小於某些大小，這是很好我的按鈕顯示，但在檢查框後，我的菜單不顯示，我想用複選框來顯示菜單，意味着如果複選框被選中，而不是隻顯示菜單，如果屏幕是小於600px，請閱讀媒體查詢的最後部分，因爲這是問題，其餘代碼工作。請閱讀css代碼中的評論，tilda選擇器的CSS，標籤按鈕不工作的響應菜單

我認爲問題出現在css的最後一個樣式中，所以請先檢查一下，並且您不必閱讀整個代碼，我將評論留在代碼告訴你哪一部分不能正常工作，

HTML代碼

<div class="wrapper"> 
    <label for="show-menu" class="show-menu">Show Menu</label> 
    <input type="checkbox" id="show-menu"> 
    <nav> 

      <ul class="flex-nav"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">Plans</a></li> 
       <li><a href="#">FAQ</a></li> 
      </ul> 
    </nav> 
</div>

CSS代碼

*{margin:0; padding:0;} 

.wrapper { 
    color:white; 
    font-family:Helvetica; 
} 
nav{background:black} 
/*making the button and checkbox invisible 
This work fine, 
I try to display it in media query, work fine 
it showed up when screen is less than 600px 
*/ 
.show-menu { 
    display:none; 

} 
input[type=checkbox]{ 
    display:none; 
} 

/*styling nav bar*/ 

.flex-nav{ 
    display:flex; 
    list-style-type:none; 
} 

.flex-nav li{ 
    flex:1; 
    text-align:center; 
} 

.flex-nav li a { 
    display:block; 
    padding:20px 0; 
    text-decoration:none; 
} 


/*media query*/ 
@media screen and (max-width:600px){ 
    /*displaying the button work fine, also 
    read the first comment */ 
    .show-menu{ 
    background:#1a1a1a; 
    cursor:pointer; 
    padding:20px 0; 
    display:flex; 
    justify-content:center; 
    } 

    /*saying dont display class flex-nav work fine*/ 
    .flex-nav{ 
     display:none; 
    } 
    /*now saying display flex-nav children if button is 
    click. does not work driving my tiny brain nuts*/ 
    input[type=checkbox]:checked ~ .flex-nav 
    { 
     display:block; 
    } 

}

來源

2017-07-26 user2860957

這最後CSS選擇器（在媒體查詢）應

input[type=checkbox]:checked + nav > .flex-nav { 
    display:block; 
}

原因：input和.flex-nav沒有兄弟姐妹。 .flex-nav是nav一個孩子，這是input兄弟姐妹，其實.flex-nav直接跟隨nav，因此+

來源

2017-07-26 00:49:33 Johannes

感謝它的工作，我不完全理解爲什麼，但我再次閱讀你的解釋，可能是我將再次感謝 – user2860957

我現在完全理解它，我回去檢查我的代碼，雖然他們是兄弟姐妹，但他們不是愚蠢的錯誤，感謝您的幫助，我試圖接受答案，但它說，你有答案很快你就會在接受它之前多受點苦。 – user2860957

tilda選擇器的CSS，標籤按鈕不工作的響應菜單

回答

相關問題