无法获得nav元素的子元素

Question

我在获取元素的孩子时遇到了一些麻烦。这是我的HTML代码：

<div class="collasped-nav">
   <i class="fa fa-bars fa-2x"></i>
   <nav class="closed">
      <a href="#">Electronics</a>
      <a href="#">Kids & Baby</a>
   </nav>
</div>

这是CSS：

.collasped-nav > i{
  color: #23527c;
}
.collasped-nav > nav{
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
}
.collasped-nav > nav.closed{
  display: none;
}
.collapsed-nav > nav > a{
  background-color: #23527c;
  padding: 10px;
}

出于某种原因，跟随.collapsed-nav > nav > a不会生效。 collapsed-nav > nav.closed以外的所有内容都有效，但collapsed-nav > nav > a却没有。我做错了什么？

Answer 1

这是错字，请使用：

.collasped-nav> nav> a{
  background-color: #23527c;
  padding: 10px;
}

注意：使用已使用.collapsed-nav但应该是.collasped-nav

Working demo

Answer 2

  

您的班级名称为“ .collasped-nav ”但您使用“ .collapsed-nav ”