html - flex 盒和 :nth-child are not being rendered properly

Question

我正在尝试制作 4 个框，其中前 2 个是绿色的，内容(一个超棒的字体图标和一个 <p> 应该垂直居中。

.big-div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
 .big-div:nth-child(-n + 2) {
    background-color: green;
 }
.small-div {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 50px;
  flex: 0 0 50%;
  text-align: center;
}
p {
  margin: 0;
}

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

<div class="big-div">
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>    
    <p>Number 1</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
    <p>Number 2</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
    <p>Number 3</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
    <p>Number 4</p>
  </div>
</div>

我试了又试，但还是不行。我的代码有问题吗？

Answer 1

您在错误的元素上使用了 nth，应该像这样使用 .big-div div:nth-child(-n + 2)。您的代码:

.big-div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
 .big-div div:nth-child(-n + 2) {
    background-color: green;
 }
.small-div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 50px;
  flex: 0 0 50%;
  text-align: center;
}
p {
  margin: 0;
}

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

<div class="big-div">
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>    
    <p>Number 1</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
    <p>Number 2</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
    <p>Number 3</p>
  </div>
  <div class="small-div">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
    <p>Number 4</p>
  </div>
</div>