html - CSS id 选择器不适用于 display flex

Question

我正在将导航栏作为 React 组件制作，但出于某种原因，我的 display:flex 无法在 id css 选择器 #main-nav 上运行。如果我将它附加到类选择器，似乎可以工作，但我真的希望它在我的 id 选择上。

它一直在使用我的 display:flex，它在我的媒体查询中，即使我展开窗口也是如此。由于某种原因超过 600px，它不会变成行。然而，其他一切都按预期工作。

ID 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 children 。