Селектор идентификатора CSS не работает для отображения flex

Question

Я создаю панель навигации как компонент React, но по какой-то причине мой display:flex не работает на селекторе id css #main-nav.Кажется, работает, если я присоединяю его к селектору классов, но я действительно хочу это на моем выборе идентификатора.

Он продолжает использовать мой display:flex, который находится внутри моего медиазапроса, даже когда я расширяю свое окно.По ряду причин он не превратится в ряды, пропустив 600 пикселей.Однако все остальное работает как положено.

Есть ли что-то в идентификаторах CSS-селекторов, которых я не знаю?Потому что я думал, что ID и более низкие операторы имеют приоритет.

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    font-family: 'Josefin Sans', sans-serif;
}

.navbar {
    min-height: 55px;
    font-size: 18px;
    background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf   100%);
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding-bottom: 10px;
    list-style-type: none;

}

#main-nav {
    list-style-type: none;
    margin-top:24px;
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    justify-content: center;
}

#main-nav li {
  text-align: center;
  margin: 15px auto;
  color: white;

}

.nav-links,
.logo {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 22px;
    margin-top:10px;
    margin-left: 20px;
}
.nav-bar-toggle {
  visibility: hidden;
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  color: rgba(255,255,255,0.8);
  font-size: 24px;
}

@media (max-width:600px) {
  #main-nav {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;

  }

  .nav-bar-toggle {
    visibility: visible;
  }

  .active {
    display: block !important;
  }

  .hidden {
    display: none !important;
  }

}

Компонент рендеринга:

<nav className="navbar">
      <span className="nav-bar-toggle" id="js-navbar-toggle" onClick={this.toggleNav} >
        <span className="nav-bar-toggle" id="js-navbar-toggle">
          <i className="fa fa-bars"></i>
        </span>
      </span>
        <a href="#" className="logo"></a>
        <ul id="main-nav" className={ this.state.hidden ? 'active' : 'hidden' }></ul>
      { this.props.links ? (
        Object.keys(this.props.links).map(key =>
             <li className={ this.state.hidden ? 'active' : 'hidden' }><a href={ this.props.links[key] } className="nav-links">{ key }</a></li>
          )
      ) : (
          <div></div>
        )
      }
      </nav>

Answer 1

Похоже, что ваш ul#main-nav элемент в настоящее время не содержит элементы списка:

<ul id="main-nav" className={ this.state.hidden ? 'active' : 'hidden' }></ul>

Ваш закрывающий тег ul#main-nav (</ul>) должен находиться за пределами ваших li элементов. Поскольку элемент не охватывает элементы списка, некоторые из ваших стилей, такие как list-style-type: none;, не будут работать. Также не будет стиля, который вы определили для #main-nav li, поскольку #main-nav в настоящее время не имеет li дочерних элементов.