无法使用input：checked选择标签内的div

Question

我有这个标记，我想在输入#menu-main-menu-1时选择:checked。但它只是不起作用。它出了什么问题？

<input type="checkbox" name="name" value="" id="mobile-trigger">
    <label for="mobile-trigger">
      <i class="fa fa-bars" aria-hidden="true"></i>
      <div class="button-overlay"></div>
      <div class="menu-overlay"></div>
        <?php wp_nav_menu( $defaults ); ?>
    </label>

      input:checked + label #menu-main-menu-1 {
    top: 92px;
    pointer-events: auto;
  }

更新，源代码中的标记：

<input type="checkbox" name="name" value="" id="mobile-trigger">
    <label for="mobile-trigger">
      <i class="fa fa-bars" aria-hidden="true"></i>
      <div class="button-overlay"></div>
      <div class="menu-overlay"></div>
        <ul id="menu-main-menu-1" class="navigation-small"><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-427"><a href="http://localhost:8888/category/portfolio/">Portfolio</a></li>

Blog 关于 联系