css - CodePen CSS 无法正确显示

Question

https://codepen.io/jamesbcn/pen/weYdPw

我正在尝试将正在处理的导航栏复制并粘贴到 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 类，而不是一个元素（前缀 a带句点的 css 术语表示浏览器正在尝试将元素与 css 类（如<div class='nav'></div>，而不是 HTML 元素<nav>）匹配。

例如

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

应该

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