css - 有没有办法用 :checked 伪类覆盖媒体查询？

Question

这是我的html代码。带有“.menu”类的 div 从 wp_nav_menu() 函数返回。

  <input type="checkbox" id="mobile-menu-check" name="mobile">
  <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container_class' => 'menu' ) ); ?>

还有我的css代码。我想要完成的是如果屏幕宽度低于 600 像素，则隐藏菜单，但在触发输入后使其再次可见。

.menu { float: right; display: block;}

input:checked + .menu { display: block!important; }

@media screen and (max-width: 600px) {
    .menu { display: none; }
}

我的问题是点击输入不会显示 div。我检查了 chrome 检查，我可以看到 css 可以工作，但是 div 仍然没有出现。是否有我应该在 css 上申请以使其工作的命令？我搜索但找不到有关媒体查询覆盖的任何信息。

标签： csswordpressmedia-queries