是的，nth-child(n+5)选中父容器下位置在第5位及以后的子元素，无论类型或可见性，仅按DOM顺序计数。
nth-child(n+5) 真的选中“第五个之后的所有元素”吗？
是的，但仅当这些元素是同一父容器下的连续兄弟元素，且类型一致（比如全是 <li> 或全是 <div>）。它不看“第几个可见元素”，也不跳过隐藏/被移除的节点——<code>:nth-child(n+5) 选的是**位置在第 5 位及以后的子元素**，哪怕前面有 <span></span>、<p></p> 或注释节点，序号照算。
常见错误现象：div:nth-child(n+5) 没生效，其实是父容器里第 5 个子节点是 <h2></h2>，不是 <div>；或者用了 <code>display: none 的元素仍占位置，导致“视觉上第 5 个”实际是 DOM 中第 7 个。
- 用
:nth-of-type(n+5)替代更稳妥，它只计同标签类型的兄弟节点 - 如果元素是动态插入的（如 React/Vue 渲染），确保 CSS 加载时机早于节点挂载，否则初始样式可能不触发重绘
- IE9+ 支持
:nth-child()，但 IE8 及以下完全不支持，需 fallback 到 class 手动标记
批量调边距时，margin-top 还是 margin-bottom 更安全？
选 margin-top。因为 :nth-child(n+5) 匹配的是从第 5 个开始的每个元素，给它们统一加 margin-top，能稳定拉开与前一个元素的距离；而用 margin-bottom 容易在列表末尾多出一截空白，尤其当容器高度受限或后续有其他内容时。
使用场景：导航菜单、卡片列表、表单字段组——只要你想让“第 5 项起每项都和上面隔开”，就优先动 margin-top。
立即学习“前端免费学习笔记（深入）”；
-
li:nth-child(n+5) { margin-top: 16px; }—— 推荐，干净可控 - 避免
li:nth-child(n+5) { margin-bottom: 16px; }—— 第 5、6、7… 项都往下推，最后一项白留空 - 若必须控制整体间距密度，可配合
:first-child抵消首项：li:nth-child(n+5) { margin-top: 16px; } li:nth-child(5) { margin-top: 0; }
和 :not(:nth-child(-n+4)) 有区别吗？
表面效果一样，但解析逻辑和性能不同。:nth-child(n+5) 是正向匹配“第 5、6、7… 位”，浏览器可快速截断；:not(:nth-child(-n+4)) 是先匹配前 4 个再取反，引擎得遍历全部子元素做排除，DOM 节点多时略慢，且可读性差。
参数差异：-n+4 表示“1 到 4”，n+5 表示“5 及以后”，数学等价，但 CSS 引擎对 n+ 形式优化更好。
- 永远优先写
:nth-child(n+5)，别绕弯用:not() - 不要写
:nth-child(5n)（每 5 个选 1 个）或:nth-child(n+5):nth-child(-n+10)（5–10 之间），那是另一类需求 - Chrome DevTools 的 Elements 面板里，勾选 “Show user agent shadow DOM” 可确认伪类是否真命中了目标节点
遇到 flex 或 grid 布局失效怎么办？
失效通常是因为 flex 容器设置了 flex-direction: column 但忘了子项默认 stretch，导致高度撑满，margin-top 看不见；或 grid 中子项被 grid-area 显式定位，脱离文档流，:nth-child() 仍有效，但 margin 不影响布局位置。
性能影响：在超长列表（>1000 项）中，:nth-child() 本身无性能问题，但大量 margin 会增加 layout 计算量；此时建议用 gap 替代（仅限 flex/grid 容器）。
- flex 列表：用
gap: 16px在容器上设统一间隙，比每个子项加 margin 更高效 - grid 列表：同样优先
row-gap/column-gap，:nth-child()留给需要差异化处理的场景 - 如果必须用 margin 且列表很长，考虑虚拟滚动，避免一次性渲染全部节点
真正容易被忽略的是：CSS 选择器匹配发生在样式计算阶段，不关心 JS 是否修改了元素内容或 class；但如果你用 JS 动态删增节点，序号会实时重排，n+5 的结果也会跟着变——这既是特性，也是 bug 温床。
