nth-child选不到目标元素，是因为它匹配父元素下第n个子节点且必须是指定标签，而换行、空格、注释等会生成干扰的文本节点；应改用nth-of-type或删除干扰节点。
nth-child 选不到目标元素，大概率不是写错了公式，而是你数的“第几个”和 DOM 里真实的子节点序号对不上。
为什么 li:nth-child(3) 经常不生效
它匹配的是父元素下「第 3 个子节点」，且这个节点必须是 li 标签。但 HTML 换行、缩进、注释甚至空格，在解析时都会生成文本节点（#text），悄悄插在 li 中间。
- 打开浏览器开发者工具，右键父容器 → “Edit as HTML”，逐行看子节点真实顺序
- 临时加
* { outline: 1px solid red; }，观察实际边界和节点分布 - 如果第 3 个位置实际是换行符或
<!-- comment -->，那li:nth-child(3)就永远不触发 - 解决办法只有两个：删掉干扰节点，或改用
li:nth-of-type(3)（它只数li，跳过其他）
nth-child(3n) 在多列布局里清边距为何总出错
它只认 DOM 顺序，完全不管视觉是否换行、屏幕宽度是否变、某项内容是否撑开导致 flex wrap 提前——只要第 3、6、9… 个子元素存在，就清它的右距，哪怕它正处在某行中间。
- 响应式列数从 3 列切到 2 列后，
nth-child(3n)还在清“第 3 个”，但此时它可能是第二行第一个，右距一清就塌了 - 某
li加了display: none？它仍在计数序列里，序号不变 - 更稳的替代方案：
.item:not(:first-child) { margin-left: 10px; }（统一左距，首项自动无距） - 现代项目直接用
gap：flex 或 grid 布局下设gap: 10px，彻底绕过位置判断
怎么安全地选中第 3 到第 5 个 li
写成 li:nth-child(n+3):nth-child(-n+5) 看似正确，但前提是这 3 个 li 是父容器下连续、无干扰的第 3–5 个子节点。
立即学习“前端免费学习笔记（深入）”；
- 只要中间夹了一个
<div> 或注释，<code>n+3和-n+5的交集就失效 - 优先改用
li:nth-of-type(n+3):nth-of-type(-n+5)，它只统计li类型，天然容错 - 如果区间需动态变化（比如“当前页第 3–5 条”），纯 CSS 公式僵硬，建议 JS 控制 class 或自定义属性
- 别把选择器写成
ul:nth-child(n+3)——伪类作用于子元素本身，不是父容器
真正难的从来不是写出 3n+1 这样的公式，而是确认你眼睛看到的“第三个”，在 DOM 树里到底是第几个子节点——打开开发者工具悬停，比查文档更快。
