css display：block属性错误或行为不同

Question

我想使用flexbox和block（在小屏幕设备中）制作自适应导航栏。在这里，我将display：flex应用于较大屏幕中的navbar_items，以单行显示它们。但是我想在移动视图中将navbar_items显示为块元素，但在媒体查询中，我选择了navbar_items和menu_active，但未将其显示为flex。它仍然显示我为flex。我希望这对您有意义，如果不清楚，请在下面评论或以易于理解的方式编辑其他人的问题。

.navbar {
  height: 10vh;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: black;
}

.navbar_logo a {
  text-decoration: none;
  font-size: 35px;
  color: white;
}

.navbar_item {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.nav_link {
  list-style: none;
  padding: 20px;
}

.nav_link a {
  font-size: 16px;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
}

@media(max-width:798px) {
  .navbar {
    display: block;
  }
  .navbar_item .menu_active {
    display: block;
  }
}

<nav class="navbar">
  <div class="navbar_logo">
    <a href="./index.html">Inspire 2020</a>
  </div>
  <ul class="navbar_item menu_active">
    <li class="nav_link"><a href="#" class="active">Home</a></li>
    <li class="nav_link"><a href="#">Events</a></li>
    <li class="nav_link"><a href="#">Schedule</a></li>
    <li class="nav_link"><a href="#">Contact</a></li>
  </ul>
</nav>

Answer 1

从.navbar_item中删除.menu_active，无需选择它。

 @media(max-width:798px)
    {
      .navbar li
      {
        display: block;
        color: blue;
      }
      .navbar_item
      {
        display: block ;
      }
    }

Answer 2

然后做

 @media(max-width:798px)
    {
      .navbar li
      {
        display: block;
        color: blue;
      }
      .menu_active
      {
        display: block !important;
      }
    }

并使用js删除或添加.menu_active