以后无法找到正确的代码选择器

我需要为学校建立一个网站。我尝试使用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

以后无法找到正确的代码选择器

回答

相关问题