:nth-child(a):nth-last-child(b)可推算总数为a+b−1；如li:nth-child(1):nth-last-child(3)表示总数为3，常用于纯css响应式布局切换。
nth-child 本身不能直接判断“父元素有多少个子元素”，但你可以用它的数学表达式特性反向构造出「只有 N 个子元素时才生效」的样式规则。这不是标准用法，但稳定可靠，浏览器兼容性好（IE9+ 即可）。
为什么 :nth-child(n):nth-last-child(n) 能判断子元素总数
关键在于两个伪类的计数方向不同：:nth-child(n) 从前往后数第 n 个，:nth-last-child(n) 从后往前数第 n 个。当某个元素同时满足「是第 n 个」且「是倒数第 n 个」，那它必然是中间唯一一个——意味着父元素总共就 n 个子元素。
例如：ul li:nth-child(3):nth-last-child(3) 只有在 ul 下**恰好 3 个 li** 时才会匹配到那个唯一的中间 li。但你真正想控制的是容器本身，所以得把选择器往上提一级：
-
ul:has(> li:nth-child(3):nth-last-child(3))—— 现代写法，但:has()在 Safari 15.4+、Chrome 105+ 才稳定，旧项目慎用 - 更通用的写法是：给
ul加 class 或用 JS，但纯 CSS 方案就是靠子元素“夹逼”定位容器 - 实际常用技巧：对最后一个
li同时加两个条件，再用相邻兄弟选择器或属性继承控制父容器表现
ul li:last-child:nth-child(5) 表示什么
这个组合等价于「该 li 既是最后一个子元素，又是第 5 个子元素」→ 父元素总共有且仅有 5 个子元素，且最后一个就是 li。
常见误判点：
- 如果
ul最后一个子节点是<!-- comment -->或空文本节点，li:last-child就不会匹配任何li，整个逻辑失效 - 必须确保目标类型（如
li）占满末尾位置；混入div、p或注释会破坏判断 - 若只需判断「至少有 N 个」，用
li:nth-child(N)即可（只要第 N 个存在，就说明 ≥N）
兼容 IE8 的降级方案：不用 :nth-child 怎么办
IE8 不支持 :nth-child，也不支持 :has()，此时无法纯 CSS 判断子元素数量。唯一可行路径是：由 JS 检测后动态加 class。
例如：
if (ul.children.length === 3) {
ul.classList.add('has-3-children');
}
然后写 CSS：
.has-3-children { grid-template-columns: repeat(3, 1fr); }
注意点：
- 别依赖
ul.childNodes.length，它包含文本节点和注释；必须用children（只读 HTML 元素集合） - 若 DOM 动态增删子项，需监听或重算，不能只 onload 执行一次
- 服务端渲染时可直接输出 class，比前端 JS 更稳
真正容易被忽略的不是公式怎么写，而是 DOM 结构里那些看不见的节点——空格、换行、注释、<script></script> 标签，全都会参与 nth-child 计数。不打开开发者工具看「Edit as HTML」下的真实子节点顺序，光靠肉眼数标签，十次有九次套错样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
