使用负的 nth-child 来选择元素

使用负的 nth-child 可以选择 1 至 n 个元素。

  1. li {
  2.   display: none;
  3. }
  5. /* 选择第 1 至第 3 个元素并显示出来 */
  6. li:nth-child(-n+3) {
  7.   display: block;
  8. }

或许你已经掌握了如何使用 :not()这个技巧，试下这个：

  1. /* 选择除前3个之外的所有项目，并显示它们 */
  2. li:not(:nth-child(-n+3)) {
  3.   display: none;
  4. }

如此简单！

演示