能否用现代CSS随机显示X个<ul>子项中的N个，隐藏其余项？

先说结论：能实现，但有局限性，比如浏览器兼容、随机效果的可控性，下面给两种可行的思路：

思路一：用CSS random() 函数（现代浏览器支持） #

现在CSS有了random()函数，能生成0到1之间的随机数，我们可以结合这个函数和calc()来控制每个列表项的显示隐藏。

比如总共有10个<li>，想随机显示3个，那每个项显示的概率就是3/10。代码这么写：

ul li {
  display: none; /* 默认先把所有项藏起来 */
}

ul li:nth-child(n) {
  /* 随机数小于0.3就显示，否则隐藏 */
  display: calc(random() < 0.3 ? block : none);
}

注意：这个方法是每个项独立判断，所以没法严格保证每次正好显示3个，只是概率上接近，而且页面刷新一次，随机结果就会改变。

思路二：预定义随机索引（严格控制显示数量） #

如果必须正好显示N个，可以提前选好要显示的项的索引，用CSS直接指定这些项显示：

比如总共有10个项，想显示第2、5、7个，代码如下：

ul li {
  display: none;
}

ul li:nth-child(2),
ul li:nth-child(5),
ul li:nth-child(7) {
  display: block;
}

这种方法的问题是随机索引是固定的，页面刷新不会变化，除非手动修改CSS。如果想要刷新时换一批显示项，还是得靠JS配合修改CSS，但如果接受固定的随机结果，这就是纯CSS的可行方案。

局限性说明 #

• 纯CSS做不到动态随机且严格控制显示数量，因为CSS没有循环或统计逻辑，没法实时统计已显示的项数。
• random()函数目前不是所有浏览器都支持，截至2024年，Chrome、Edge、Firefox已支持，Safari仍在开发适配中。
• 如果必须每次都精准显示N个，纯CSS很难实现，JS方案会更靠谱，但如果能接受概率性显示或者固定随机序列，纯CSS完全可以满足需求。

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