CSS 是一种网页样式表语言，可以用来设置网页中的文本、背景、颜色、大小、位置等各种属性。在实际应用中，我们经常会遇到需要控制元素个数的情况，例如只显示最多 5 个列表项，超过 5 个的需要隐藏起来。那么 CSS 如何实现这种控制元素个数的效果呢？

/* 通过 nth-child 选择器来控制数量 */
ul li:nth-child(n+6) {
display: none;
}

上面的代码中，我们通过 CSS 伪类选择器:nth-child()选择了列表中的第 6 个及其之后的项，然后设置它们的显示为none，即隐藏起来。这样就能实现只显示前面 5 个列表项的效果。

除了使用:nth-child()选择器外，CSS 还可以通过@media媒体查询来实现类似的效果。

/* 通过媒体查询控制数量 */
@media screen and (max-width: 500px) {
ul li:nth-child(n+6) {
display: none;
}
}

上面的代码中，我们通过@media媒体查询选择了当前屏幕尺寸小于500px的情况，并且隐藏了第 6 个及其之后的项。这样就能实现在移动设备上只显示前面 5 个列表项的效果。