结论：:nth-child() 不支持直接表示连续区间，需拆解为 :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9) 并用逗号连接，或改用 :nth-child(n+6):nth-child(-n+9) 组合实现第6至第9个元素的选中。
如何用 :nth-child(an+b) 选中连续编号区间的元素
直接说结论：:nth-child() 本身不支持“大于5且小于10”这种范围写法，它只能描述等差数列位置（比如每3个选1个、奇数位、第7个）。所谓“选中第6到第9个”，本质是把范围拆成多个合法的 an+b 表达式组合，或换用更合适的伪类。
常见错误是写 :nth-child(6-9) 或 :nth-child(>=6):nth-child( —— 这两种语法浏览器根本不认，会直接忽略整条规则。
-
:nth-child(6)、:nth-child(7)、:nth-child(8)、:nth-child(9)四条单独写，最直白，适合固定小范围 - 想动态覆盖“从第 n 个开始的 m 个”，可用
:nth-child(n+6):nth-child(-n+9)：前者选中第6及之后所有，后者选中第9及之前所有，两者交集就是6–9 - 注意顺序不能反——
:nth-child(-n+9):nth-child(n+6)效果一样，但写成:nth-child(n+6):nth-child(n+9)就错了（后者是“≥6 且 ≥9”，等价于 ≥9）
为什么不用 :nth-of-type() 替代？
如果目标元素类型混杂（比如 <div> 中穿插 <code><p></p>、<span></span>），:nth-child() 按 DOM 顺序计数，:nth-of-type() 只数同标签名。选“第6到第9个 <div>”，得用 <code>:nth-of-type() 配合相同逻辑：:nth-of-type(n+6):nth-of-type(-n+9)。
但要注意：如果前面有其他 <div> 被 <code>display: none 或 visibility: hidden，它们仍参与计数——CSS 伪类不感知可见性。
立即学习“前端免费学习笔记（深入）”；
- 要跳过隐藏元素？不行，CSS 没提供“可见元素第N个”的选择器
- 需要按渲染后顺序选？必须用 JS 动态加 class，或改用
:is(:not([hidden]))配合其他逻辑（但无法直接编号）
:nth-child() 的 a 和 b 参数怎么理解才不绕晕
公式 an+b 中，a 是步长（周期），b 是起始偏移（从1开始数）。关键点是：b 可以为负数，但结果位置必须 ≥ 1 才生效。
比如 :nth-child(3n+0) 等价于 :nth-child(3n)，表示第3、6、9…个；而 :nth-child(3n-1) 实际匹配的是第2、5、8…个（因为当 n=1 时，3×1−1=2；n=0 时结果为−1，无效）。
- a = 0 时，
:nth-child(0n+5)就是固定选第5个（常用来替代:nth-child(5)） - a 为负（如
-2n+10）会倒着匹配：n=1→8，n=2→6，n=3→4，n=4→2，n=5→0（无效），所以最终是 2、4、6、8 - 浏览器解析时先算表达式值，再判断是否 ≥1，不是“从后往前数”
真正需要范围选择时，该优先考虑什么
如果业务逻辑里频繁出现“前N个”“后M个”“中间某段”，说明结构可能更适合用 class 控制，而不是硬套 :nth-child()。例如给批量生成的元素加 data-index="6"，再用 [data-index] [data-index~="6"] 或 JS 筛选。
CSS 的 :nth-child() 是为规律性布局设计的，强行塞进非等差需求，容易让维护者看懂第一行就去翻 MDN。
最易被忽略的一点：伪类匹配发生在样式计算阶段，不响应后续 DOM 变动。往父容器动态插入新元素，已渲染的旧元素不会重新触发 :nth-child() 计算——这点和 JS 的 querySelectorAll(':nth-child(2)') 行为一致，但比很多人想的更静态。
