使用CSS在列表中显示前N个项目
一种常见的设计方法是使用列表元素在页面上创建菜单或部分的布局。一切都很好，直到用户出现并创建许多使页面布局混乱的列表项为止。在CSS中，可以仅显示列表中的前几项，以便您的用户不会弄乱布局。
要仅显示列表中的前2个项目，请使用相邻的同级组合器隐藏第三个元素及其后的所有内容。
li+li+li{display:none;}
您可以根据需要在此列表中添加任意数量的li项目，以确保页面的布局可以使用正确数量的元素。
您也可以在CSS3中使用默认显示来做同样的事情：在所有列表项上都不显示，然后使用：nth-child伪类仅显示列表中的前2个项。
li {
display: none;
}
li:nth-child(-n+2){
display: list-item;
}这会将列表项设置回默认的“列表项”，但是如果您将列表项用作内容块，则可以将其设置为“阻止”。注意以上样式，因为它们会影响页面中的所有列表元素。您需要在这些选择器周围加上ul或ol元素和一个类，以便仅定位要定位的列表。
这是防止其他主菜单项破坏布局的一种简洁（且灵活的）方法。如果您有兴趣在工作中看到它，那么我创建了一个Codepen来展示它的实际效果。