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子代。

CSS ID选择器不适用于Display Flex

1 个答案: