仅显示使用nth-child的第一，第二和最后一个孩子？

Question

是否可以仅显示使用nth-child的第一个，第二个和最后一个孩子？

代数表达式是什么？

即使在使用CSS选择器之后，我也无法解决这个问题。

Answer 1

您可以使用多个:not伪类

执行此类操作

＆＃13;

＆＃13;

ul li:not(:nth-child(1)):not(:nth-child(2)):not(:last-child) {
  display: none;
}

＆＃13;

<ul>
  <li>First</li>
  <li>Second</li>
  <li>random</li>
  <li>random</li>
  <li>random</li>
  <li>Last</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

不确定单个代数表达式，但您可以将选择器分组为单个规则。

＆＃13;

＆＃13;

li { display: none; }

li:first-child,
li:nth-child(2),
li:last-child {
  display: list-item;
}

＆＃13;

<ul>
  <li>First</li>
  <li>Second</li>
  <li>random</li>
  <li>random</li>
  <li>random</li>
  <li>Last</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

OR

＆＃13;

＆＃13;

li { display: none; }

li:nth-child(-1n + 2),
li:last-child {
  display: list-item;
}

＆＃13;

<ul>
  <li>First</li>
  <li>Second</li>
  <li>random</li>
  <li>random</li>
  <li>random</li>
  <li>Last</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

仅在满足以下任一条件时显示您的项目：

• :nth-child(-n+2)（第一个+第二个项目）
• :last-child（最后一项）

演示

＆＃13;

＆＃13;

li {
    display: none;
}

li:nth-child(-n+2), li:last-child {
    display: list-item;
}

＆＃13;

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li>Fifth</li>
</ul>

＆＃13;

＆＃13;

＆＃13;