html - 将显示应用于某些第 n 个 child

Question

我想显示所有值小于或等于 4 的第 n 个 child 。是否有适用于我要显示的条件的 CSS if 语句？

谢谢

Answer 1

是的。 :nth-child 接受一个 n 参数，该参数将采用所有非负整数值。

:nth-child(-n+4)

• n=0:选择第 4 个 child
• n=1:选择第 3 个 child
• n=2:选择第二个 child
• n=3:选择第一个 child
• n>3:没有

例子:

div {
  margin: 10px;
}
div:nth-child(-n+4) {
  background: green;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>