Html CSS非相关选择器

在CSS中，当出现悬停或选中等动作时，我试图选择一个不相关的元素（不是父元素或子元素）

这是我正在处理的代码（），它显示了我尝试执行的基本操作，尽管它选择了下一个元素

该代码的问题是，当您将HTML更改为在

#menu toggle

和

#menu

之间时，菜单将不会显示

那么，我是否可以使用相同的基本原则在页面上选择不同的元素，而不必使用javascript

编辑

似乎我对工作代码简化得太多了，在我的“生产”代码中，我将元素放在单独的div容器中（所以菜单和内容是一种想法）-例如：

CSS目标选择器

带有#后跟锚名称的URL链接到某个元素 在文档中。链接到的图元是目标图元

这是我能想到的最好的解决方案：

使用CSS目标选择器，可以有一个指向菜单ID的链接

<a href="#newmenu">NewMenu</a>

<ul class="menu" id="newmenu">
  <li><a href="#">A link</a></li>
  <li><a href="#">Second link</a></li>
  <li><a href="#">Third link</a></li>
</ul>

---

如果我正确理解了您的问题，您需要的是

~

选择器，而不是

+

。

+

选择器直接选择后面的项目，而

~

选择后面的任何项目

因此，不是：

#menu-toggle:checked + #menu

你想要

#menu-toggle:checked ~ #menu

---

如果我误解了

请告诉我，一般来说，没有Javascript，没有。有一些“黑客”可以使用样式化的复选框、标签等，但它们不太可靠。只是出于好奇，为什么不能使用Javascript？我目前使用的方法是复选框破解（尽管使用无线电）。如果用户没有启用javascript（隐藏的内容是至关重要的，而不是用户体验的改善），我想使用它。对不起，我过度简化了我的代码！在我的生产代码中，它们位于两个独立的

div

容器中，比如说，是的，我们必须等到CSS4才能处理这种情况：谢谢，因为它们还没有出来，我必须尝试另一种解决方法。再次感谢您的帮助。对不起，我过度简化了我的代码！在我的生产代码中，它们位于两个独立的

div

容器中，如@Daniel更改了我的答案。也更新了示例。这几乎是完美的，我使用收音机/复选框的唯一原因是，您可以在默认情况下将一个设置为活动；我似乎想不出一种方法来处理链接？@Daniel如果你开始使用wrapper div等添加不必要的标记，这是可能的，但这确实是Javascript的用意。目前没有想法。如果这是一个没有JS的备份，而且越来越少了，那么打开默认菜单可能不会破坏交易。好的一点，只要没有JS的人可以访问内容，JS就可以作为一个增强。

#menu-toggle:checked ~ #menu