使用: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()。例如，选中倒数第一个：
: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 或额外类名。关键是理解位置逻辑而非依赖总数。