如何根据CSS变量值显示指定数量的HTML子元素？

嘿，这个问题我之前也踩过坑！直接在:nth-child()里塞var(--num)确实行不通——毕竟CSS选择器的语法规则里，:nth-child()的参数得是静态的表达式，哪怕CSS变量能传值，它也没法直接被解析成选择器里的数值逻辑。不过不用JS也有完美解决办法，给你两种实用方案：

方案一：基础需求（显示序号≤--num的子元素） #

利用:nth-child(-n + X)的原生逻辑，它能选中前X个子元素，我们只需要把X替换成CSS变量--num即可。核心思路是先默认隐藏所有子元素，再通过选择器显示符合条件的元素：

/* 父元素定义变量 */
.parent {
  --num: 3; /* 这里设置你要显示的最大序号 */
}

/* 默认隐藏所有子元素 */
.parent > * {
  display: none;
}

/* 显示序号≤--num的子元素 */
.parent > :nth-child(-n + var(--num)) {
  display: block; /* 根据你的布局换成flex/inline-block等 */
}

原理很简单：当子元素的序号n≤--num时，-n + var(--num)的结果≥0，元素会被选中；当n>--num时，结果为负，不会被选中，正好匹配需求。

方案二：进阶需求（显示序号<--num的子元素） #

如果需要严格显示序号小于--num的元素，只需要用calc()对变量做减法调整即可：

.parent {
  --num: 4; /* 要显示n<4的元素，也就是前3个 */
}

.parent > * {
  display: none;
}

.parent > :nth-child(-n + calc(var(--num) - 1)) {
  display: block;
}

关键注意事项 #

• 变量必须是纯数值：--num只能写数字（比如3），不能带任何单位（比如3px），否则数值运算会失效。
• 选择器精准度：如果父元素下有非目标子元素，把>*换成具体的类选择器（比如.parent > .target-child），避免误选。
• 兼容性：现代浏览器（Chrome、Firefox、Edge 91+）都支持这种写法，无需担心兼容问题。

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