Question

在CSS中，我试图在发生悬停或检查等操作时选择不相关的（不是父元素或子元素）。

这是我工作的代码（http://codepen.io/danielrowe/pen/jHAur），它显示了我尝试做的基础知识，尽管它选择了下一个元素。

该代码的问题在于，当您将HTML更改为#menu-toggle和#menu之间的某些内容时，菜单将不会显示。

那么无论如何我可以使用相同的基本原则选择页面上不同的元素而不使用javascript ？

修改

看起来我简化了我的工作代码，在我的“生产”代码中，我将元素放在单独的div容器中（所以菜单和内容有点想法） - 例如：http://codepen.io/danielrowe/pen/hxGwK

Answer 1

CSS目标选择器
带有＃后跟锚名称的URL，链接到某个元素在文件中。链接的元素是目标元素。

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

使用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>

然后使用CSS，你可以用

显示它

.menu:target{
  display:block;
}

Answer 2

如果我正确理解您的问题，那么您需要的是~选择器，而不是+。 +选择器会在~选择之后的任何项目后直接选择项目。

所以而不是：

#menu-toggle:checked + #menu

你想要

#menu-toggle:checked ~ #menu

Check out this example,让我知道我是否误解了

CSS非相关选择器

2 个答案: