从第1到第4选择nth-child

Question

我要到达第4个第一个孩子。 有没有更好的语法？

footer div:first-child, footer div:nth-child(2), footer div:nth-child(3), footer div:nth-child(4)  {display: inline-block;}

Answer 1

是的，有更好的语法。

您正在寻找的选择器是：:nth-child(-n + 4)

这是一个演示：

.wpr {}

.wpr div {
  width: 50px;
  height: 50px;
  background-color: red;
  display: inline-block;
  margin: 10px;
}

.wpr div:nth-child(-n + 4) {
  background-color: green;
}

<div class="wpr">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

请参阅MDN - nth-child

  

:nth-child(-n+3)

     

表示一组兄弟姐妹中的前三个元素。