使用:nth-child系列选择器可精准定位动态子元素：:nth-child(n)选第n个，:nth-last-child(n)选倒数第n个，:nth-child(odd)/:nth-child(even)选奇偶位，:nth-child(3n+1)按公式匹配，:nth-child(1):nth-last-child(1)选唯一子元素，无需依赖总数或JS。

当子元素数量不确定，但仍想选中某个特定位置的元素时，可以使用 CSS 的 :nth-child() 选择器精准定位。它不依赖总数量，只关注元素在父容器中的位置顺序，因此非常适合处理动态或不定数量的子元素。

选中第 n 个子元素

如果想选中父元素下的第 3 个子元素，不管它是什么类型，直接使用：

:nth-child(3) { /* 样式 */ }

这条规则会匹配父元素中排在第 3 位的所有子元素，不论其标签名。

选中倒数第 n 个子元素

当总数未知但想从末尾往前选，比如选倒数第 2 个，可以用：

立即学习“前端免费学习笔记（深入）”；

:nth-child(-n + 2):nth-last-child(2), :nth-child(-n + 2):nth-last-child(2) ~ * { /* 清除其他样式影响，可选 */ }

更实用的方式是结合 :nth-last-child()。例如，选中倒数第一个：

Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载

:nth-last-child(1) { /* 倒数第一个 */ }

按公式匹配多个位置（如奇偶）

使用表达式可以匹配规律性位置。比如所有奇数位：

:nth-child(odd) { /* 第1、3、5...个 */ }

偶数位：

:nth-child(even) { /* 第2、4、6...个 */ }

也可以用公式，如每 3 个中的第一个：

:nth-child(3n + 1) { /* 匹配 1, 4, 7, ... */ }

只选中唯一存在的某个元素

当不确定是否有多个子元素，但想单独样式化“只有一个”的情况，可用：

:nth-child(1):nth-last-child(1) { /* 只有一个子元素时生效 */ }

这个组合意味着：它是第一个，同时也是最后一个，即唯一子元素。

基本上就这些。利用 :nth-child 系列选择器，完全可以应对子元素数量变化的场景，无需 JS 或额外类名。关键是理解位置逻辑而非依赖总数。