将显示应用于某些n-child

Question

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

由于

Answer 1

您仍然可以使用 :nth-child 来实现此目标。

E.g。这将选择li

中ul以内的所有第一个四个子项

＆＃13;

＆＃13;

ul > li:nth-child(-n+4)
{
  color: red;
}

＆＃13;

<ul>
  <li> 1 </li>
  <li> 2 </li>
  <li> 3 </li>
  <li> 4 </li>
  <li> 5 </li>
  <li> 6 </li>
  <li> 7 </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

:nth-child(-n+4)

• n=0：选择第4个孩子
• n=1：选择第3个孩子
• n=2：选择第二个孩子
• n=3：选择第一个孩子
• n>3：没有

示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;