如何使用 CSS 在两个 div 之间操作

Question

我正在尝试以下方法：

<header>
    <input type="checkbox" class="menu-toggle">
</header>
<nav class="top-navigation">
    <ul class="top-menu">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
    </ul>
</nav>

我的 CSS 如下所示：

.top-menu{
    display: none;
}
.menu-toggle:checked .top-menu{
    display: block;
}

但我没有做到这一点。我也试过：

.menu-toggle:checked ~ .top-menu

但也失败了。

如果我能input[checkbox]放在<nav>内，我就可以让它工作.但实际上出于模板目的，我需要像 HTML 一样放置它（彼此分开）。

我该怎么做？我在这里做错了什么？

Answer 1

像这样将导航包装在标题中：

<header>
    <input type="checkbox" class="menu-toggle">
    <nav class="top-navigation">
       <ul class="top-menu">
           <li><a href="#">A</a></li>
           <li><a href="#">B</a></li>
       </ul>
    </nav>
</header>

只有您才能使用：

.top-menu{
    display: none;
}
.menu-toggle:checked + .top-navigation .top-menu{
    display: block;
}

.top-menu{
        display: none;
    }
    .menu-toggle:checked + .top-navigation .top-menu{
        display: block;
    }

<header>
        <input type="checkbox" class="menu-toggle">
        <nav class="top-navigation">
           <ul class="top-menu">
               <li><a href="#">A</a></li>
               <li><a href="#">B</a></li>
           </ul>
        </nav>
    </header>

Answer 2

感谢@BhojendraSah的回答。对我来说，这是在说：对不起，这是不可能的 - 正如@dsfq在评论中已经说过的那样：

使用这种 HTML 结构，:checked 是不可能的。复选框至少需要位于header之外。

但是我已经说过，我无法更改我的模板以在单个容器中制作它们。但是没有这个，我所拥有的是不可能的。

所以我决定做B计划：

 <nav class="top-navigation">
    <input type="checkbox" class="menu-toggle">
    <ul class="top-menu">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
    </ul>
</nav>

并做一些额外的浮动和保证金人员：

.menu-toggle{
   float: right;
   margin-top: -35px; /* as per my template */
   margin-right: 20px; /* as per my template */
}

使感觉复选框在<header>内。非常感谢，我不接受Bhojendra的回答，因为我已经说过，我现在实际上不能去做这样的事情。谢谢博金德拉。