:nth-child()的使用

[yurensmile]

el:nth-child(2) {} //选取el的第二个标签
el:nth-child(n+3) {} //选取el的大于等于3的标签

例子：

<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

.bouncing-loader {
  display: flex;
  justify-content: center;
}
.bouncing-loader > div:nth-child(1) {
  width: 2rem;
  height: 2rem;
  border: 2px solid black;
  background-color: blue;
}
.bouncing-loader > div:nth-child(2) {
  width: 2rem;
  height: 2rem;
  border: 2px solid black;
  background-color: gray;
}
.bouncing-loader > div:nth-child(n+3) {
  width: 2rem;
  height: 2rem;
  border: 2px solid black;
  background-color: red;
}

结果：