html - CSS 非相关选择器

Question

在 CSS 中，当悬停或选中等 Action 发生时，我试图选择一个不相关的(不是父元素或子元素)。

这是我正在使用的代码 ( http://codepen.io/danielrowe/pen/jHAur )，它显示了我正在尝试做的事情的基础知识，尽管它选择了下一个元素。

该代码的问题在于，当您将 HTML 更改为介于 #menu-toggle 之间时和 #menu正如预期的那样，菜单不会显示。

那么我是否可以使用此处相同的基本原则选择页面上不同位置的元素而不使用 javascript？

编辑

看来我简化了我的工作代码，在我的“生产”代码中，我将元素放在单独的 div 容器中(因此菜单和内容有点想法)- 示例:http://codepen.io/danielrowe/pen/hxGwK

Answer 1

CSS Target Selector

URLs with an # followed by an anchor name, link to a certain element within a document. The element being linked to is the target element.

这是我能想到的最佳解决方案:http://codepen.io/heyvian/pen/KIGfj

使用 CSS Target 选择器，您可以获得一个指向菜单 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>

然后使用 CSS 你可以显示它

.menu:target{
  display:block;
}