如何使用CSS的nth-child选择器隐藏指定位置后的剩余元素

你可以使用 :nth-child(n+6) 选择器选中第5个之后的所有元素，再通过 display: none 隐藏它们。

原理说明 #

:nth-child() 的表达式 n+6 中，n 会从0开始依次取值（0、1、2……），计算后对应的元素位置就是6、7、8……，正好匹配第5个之后的所有目标元素。

完整代码示例 #

HTML结构

<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div> 
<div class="item">item 6</div>
<div class="item">item 7</div>
<div class="item">item 8</div>
<!-- 更多item元素 -->

CSS样式

.item:nth-child(n+6) {
  display: none;
}

设置完成后，第6个及以后的 .item 元素都会被隐藏。

内容的提问来源于stack exchange，提问作者Epple