css - 如何显示前 3 个列表项并使用 CSS nth-child 隐藏其余项？

Question

是否可以使用 CSS 选择器选择多个超过定义数字的子级？

我想隐藏 #3 之后的所有列表项：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li> <!-- hide this -->
  <li>5</li> <!-- hide this -->
</ul>

<style>
  ul li:nth-child(X) {
    display: none;
  }
</style>

Answer 1

我不知道哪个浏览器支持这个，但你可以将一个公式传递给:nth-of-type()：

ul li:nth-of-type(1n+4) {display: none;} /* should match your case */

更多详情：http ://www.w3schools.com/cssref/sel_nth-of-type.asp

编辑

我将它从 (n+4) 更改为 (1n+4)，因为第一个版本有效但无效。我在媒体查询中使用它来隐藏较小屏幕上的缩减项目。

---

例子：

b:nth-of-type(1n+4){ opacity:.3; }

<b>1</b>
<b>2</b>
<b>3</b>
<b>4</b>
<b>5</b>