如何用CSS限制第三方动态生成的巡演日期列表显示数量？

你可以借助CSS的结构化伪类选择器快速实现需求，具体代码和说明如下：

基础实现代码 #

/* 隐藏第6个及之后的所有.event元素 */
.event:nth-child(n+6) {
  display: none;
}

原理说明 #

:nth-child(n+6) 会选中父容器里从第6个开始的所有同级子元素（这里的n从0开始计算，n+6对应第6、7、8...个元素），给这些元素设置display:none就能直接隐藏。

特殊场景处理 #

如果父容器中还包含其他非.event类的元素，上面的计数会出错，这时可以改用:nth-of-type()来仅针对.event类型的元素计数：

.event:nth-of-type(n+6) {
  display: none;
}

验证提示 #

确认所有巡演项都是同一个父容器的直接子元素，这样选择器才能准确匹配到目标元素。

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