以後無法找到正確的代碼選擇器

我需要爲學校建立一個網站。我嘗試使用Checkbox Hack。它一般工作，但我不能在我的網站實施它。這裏是我的問題：input[type=checkbox]:checked > .menuitem似乎並沒有影響如下因素：以後無法找到正確的代碼選擇器

<input type="checkbox" id="toggle-1"> 
    <nav> 
    <ul> 
    <li><label for="toggle-1"><img src="images/menu.png" height="38" width="38"/></label></li> 
    <li class="menuitem"><a href="About_us.html" target="_self">About us</a></li> 
    </ul> 
    </nav>

我試着用各種各樣的東西取代我「> .menuitem」在input[type=checkbox]:checked > .menuitem像~和~ nav>ul>li但我沒有任何更迭。有人知道我需要做什麼嗎？

我要找的，做這樣的效果：

If (checkbox is checked) { 
    Hide a part of the webpage 
}

在另一方面：我不允許使用任何其他然後HTML和CSS（所以沒有Javascript或PHP等）

來源

2016-12-29 Sietse99

@sieltse您可以提供完整的代碼？ –

試試這個

input[type=checkbox]:checked + nav .menuitem

input[type=checkbox]:checked + nav .menuitem{ 
 
    display:none; 
 
}

<input type="checkbox" id="toggle-1"> 
 
    <nav> 
 
    <ul> 
 
    <li><label for="toggle-1"><img src="images/menu.png" height="38" width="38"/></label></li> 
 
    <li class="menuitem"><a href="About_us.html" target="_self">About us</a></li> 
 
    </ul> 
 
    </nav>

來源

2016-12-29 11:48:26

檢查我的更新回答 –

我再次嘗試過您的解決方案，而無需更改任何HTML或CSS。儘管如此，我還是有一種不同的效果。我認爲它不起作用，因爲舊的HTML/CSS仍然在內存中。無論如何：現在起作用。謝謝！ – Sietse99

> CSS選擇器是立即的子選擇器，因此瀏覽器僅搜索輸入標記的第一個子元素 - 在本例中爲nav元素。

所有你需要的是：

input[type=checkbox]:checked .menuitem

最終，你可以添加額外的標籤更具體

input[type=checkbox]:checked nav .menuitem

或者

input[type=checkbox]:checked nav ul li.menuitem

來源

2016-12-29 12:07:47 xyoTick

以後無法找到正確的代碼選擇器

回答

相關問題