:nth-child(a):nth-last-child(b)可推得总子元素数为a+b−1，用于纯CSS判断元素数量并应用不同布局。
nth-last-child(n) 本身不能直接“查询数量”，但可以配合 :nth-last-child(1) 判定末位来反推总数
很多人以为 :nth-last-child(n) 能像 JS 那样获取元素个数，其实它只是从末尾倒数匹配第 n 个元素。真正能间接判断“总共有几个”的关键，是利用 :nth-last-child(1) —— 它只匹配最后一个子元素。如果某个元素同时满足 :nth-child(2) 和 :nth-last-child(1)，说明它既是第 2 个、又是最后一个，那总数就是 2。
所以核心思路是：用多个伪类组合，让样式只在“该元素位置 + 倒序位置 = 总数”成立时生效。
-
li:nth-child(1):nth-last-child(3)→ 总数为 3，且当前是第 1 个（即：只有 3 个元素时，第一个才同时满足） -
li:nth-child(2):nth-last-child(2)→ 总数为 4？不对，2+2=4，但这是第 2 个且倒数第 2 个 → 实际总数是 3（位置 2，倒数 2 → 总数 = 2 + 2 − 1 = 3） - 通用公式：若某元素匹配
:nth-child(a):nth-last-child(b)，则总子元素数必为a + b − 1
实际常用场景：3 种数量分别给不同布局（如 1/2/3+ 个 item）
比如导航菜单项数量不确定，想让 1 个时居中、2 个时左右均分、3 个及以上时等宽铺满。不能靠 JS 注入 class，纯 CSS 就得靠这种“定位锚点”法：
nav li {
flex: 0 0 auto;
}
/* 只有 1 个 item：它既是第 1 个，也是最后一个 */
nav li:nth-child(1):nth-last-child(1) {
margin: 0 auto;
}
/* 有 2 个 item：第 1 个需占 50%，且它必须是倒数第 2 个 */
nav li:nth-child(1):nth-last-child(2) {
flex-basis: 50%;
}
nav li:nth-child(2):nth-last-child(1) {
flex-basis: 50%;
}
/* 有 3 个及以上：只要第 3 个存在且是倒数第 1~n 个，就触发等宽（更稳妥写法是用 :nth-last-child(n) ≥ 3 的判定）*/
nav li:nth-child(3):nth-last-child(n+1) {
flex: 1;
}
nav li:nth-child(3):nth-last-child(n+1) ~ li {
flex: 1;
}注意：:nth-last-child(n+1) 表示“倒数第 1 个或更前”，即至少有 3 个元素时，第 3 个元素一定存在且倒数位置 ≥ 1 —— 这比写死 :nth-last-child(3) 更健壮。
立即学习“前端免费学习笔记（深入）”；
为什么不用 :nth-child(N) :nth-child(N) 连写？容易踩的兼容性与逻辑坑
有人试过 li:nth-child(1):nth-child(2) 想表达“同时是第 1 和第 2 个”，这永远不匹配——一个元素不可能有两个序号。伪类是“与”关系，不是“或”。另外，:nth-last-child 在 IE9+ 支持，但 n+1 这类公式写法在 IE9 中仅支持简单数字（如 1、2），不支持表达式，所以生产环境若需兼容旧 IE，只能枚举有限数量（如最多判到 5 个）。
- Firefox/Chrome/Safari 支持完整
an+b语法（如n+3、2n） - IE9 支持
:nth-last-child(1)、:nth-last-child(2)，但不支持:nth-last-child(n+2) - 不要依赖
:nth-child(1):nth-last-child(-n+3)这种写法——虽然数学上等价于“总数 ≤ 3”，但浏览器解析行为不一致，尤其 Safari 旧版会忽略
更可靠的替代方案：CSS Container Queries + :has()（现代浏览器）
如果目标环境支持 CSS :has()（Chrome 105+、Safari 15.4+、Firefox 121+），可以用更直观的方式：
.container:has(> *:nth-child(3)) {
/* 至少 3 个子元素 */
}
.container:has(> *:nth-child(2)):has(> *:nth-last-child(2)) {
/* 正好 3 个：第 2 个存在，且倒数第 2 个也存在 → 总数 = 2 + 2 − 1 = 3 */
}不过 :has() 无法在 @keyframes 或部分伪元素中使用，且性能开销略高于纯 :nth- 系列。真要兼顾兼容性和可读性，目前最稳的仍是“枚举关键数量 + :nth-child(a):nth-last-child(b) 组合”。
真正难的不是写出某个数量的规则，而是想清楚：你到底需要区分“恰好 N 个”，还是“至少 N 个”，或是“N 个及以下”——这直接决定该用 =、≥ 还是 ≤ 的逻辑转化，而 CSS 里没有不等号，全靠伪类位置关系硬凑。
