CodePen CSS 显示不正确

Question

我正在尝试复制并粘贴我正在处理的导航栏到 CodePen 中，但是 CSS 没有正确显示。

.navbar-brand {
  padding: 0px;
  height: 90px;
}
.navbar-brand>img {
  height: 100%;
  padding: 5px 15px 5px 5px;
  width: auto;
  margin: center;
}
.nav >li >a {
  margin-top: 0;
}

.nav ul{
    display: flex;
    background-color: #C2A76F;
    list-style-type: none;
    padding: 0;
}

.nav ul a{
    text-decoration: none;
    text-align: center;
    color: #FFF;
    display: block;
    padding: 5px;
    border: 2px solid white;
}

.nav ul a:hover{
    background-color: #816F4A;
}

.nav li{
    flex: 1 1 0;
}

p{
    padding-top: 10px;
    font-size: 20px;
}

Answer 1

你有几个问题，一个是你 HTML 中的结构看起来不符合你在 CSS 中的预期，另一个是你将 nav 视为 css class，而不是元素（在 css 术语前加上句点表示浏览器试图将元素与 css class 类似于 <div class='nav'></div>，而不是 HTML 元素 <nav>).

例如

.nav >li >a {
  margin-top: 0;
}

应该是

nav >li >a {
  margin-top: 0;
}

CodePen CSS 显示不正确

CodePen CSS not displaying properly

css

codepen