CSS 是一種網(wǎng)頁樣式表語言，可以用來設(shè)置網(wǎng)頁中的文本、背景、顏色、大小、位置等各種屬性。在實際應(yīng)用中，我們經(jīng)常會遇到需要控制元素個數(shù)的情況，例如只顯示最多 5 個列表項，超過 5 個的需要隱藏起來。那么 CSS 如何實現(xiàn)這種控制元素個數(shù)的效果呢？

/* 通過 nth-child 選擇器來控制數(shù)量 */
ul li:nth-child(n+6) {
display: none;
}

上面的代碼中，我們通過 CSS 偽類選擇器:nth-child()選擇了列表中的第 6 個及其之后的項，然后設(shè)置它們的顯示為none，即隱藏起來。這樣就能實現(xiàn)只顯示前面 5 個列表項的效果。

除了使用:nth-child()選擇器外，CSS 還可以通過@media媒體查詢來實現(xiàn)類似的效果。

/* 通過媒體查詢控制數(shù)量 */
@media screen and (max-width: 500px) {
ul li:nth-child(n+6) {
display: none;
}
}

上面的代碼中，我們通過@media媒體查詢選擇了當(dāng)前屏幕尺寸小于500px的情況，并且隱藏了第 6 個及其之后的項。這樣就能實現(xiàn)在移動設(shè)備上只顯示前面 5 個列表項的效果。