最常用且可靠的方案是:nth-child(-n+5):nth-child(n+3)，它通过两个伪类叠加筛选出第3至第5个同级子元素，注意需考虑所有同级节点（含非目标标签）参与计数。
用 :nth-child() 选中第3到第5个元素
直接写 :nth-child(-n+5):nth-child(n+3) 就行，这是最常用也最可靠的方案。它利用两个伪类叠加筛选：先取前5个，再从里面挑出第3个及以后的，交集就是第3、4、5个。
注意这不是数学区间写法，:nth-child(3..5) 不存在，也不能用 :nth-of-type 替代（除非你确定所有目标元素类型完全一致且顺序无干扰）。
- 只对同级兄弟元素生效，父容器必须相同
- 计数从1开始，且包含所有同级子元素（不管标签名或是否匹配CSS选择器）
- 如果中间有其他标签（比如
<div> 里夹着 <code><span></span>），它们也参与计数，可能让目标“偏移”为什么不用
:nth-of-type():nth-of-type()看的是元素类型（如div、p），不是位置序号。如果你要选“第3到第5个div”，而它们前面还有h2、ul，那:nth-of-type(3)确实能命中第3个div—— 但前提是这些div在同级中确实是第3、4、5个同类元素。- 若 HTML 结构是
<p></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <div></div> <div></div> <span></span><div></div>，那么第3个div实际是第5个子元素，:nth-child(5)才对，:nth-of-type(3)会错配 - 一旦页面结构动态变化（比如 JS 插入新节点），
:nth-of-type行为更难预测 - 多数场景下，你要的其实是“视觉顺序上的第3–5个”，不是“第3–5个某类型”，所以优先用
:nth-child
兼容性与常见错误
:nth-child()在 IE9+ 完全支持，移动端也没问题。真正容易翻车的是误读选择器逻辑。- 写成
:nth-child(3-5)→ 浏览器直接忽略整条规则，控制台不报错，样式不生效 - 写成
:nth-child(3), :nth-child(4), :nth-child(5)→ 可用，但冗余，维护成本高，且无法扩展 - 用在 Flex/Grid 容器里时，
:nth-child仍按 DOM 顺序计数，和视觉排列无关（即使 CSS 改了显示顺序） - 如果目标元素被
display: none或visibility: hidden，它依然参与:nth-child计数
需要动态范围时怎么办
纯 CSS 没法写变量或函数，所以“第 N 到 M 个”这种需求，N/M 不固定就只能靠 JS 配合 class 控制，或者预设好几组规则（比如
.range-3-to-5对应上面那个双:nth-child表达式）。- CSS 里不能用
calc()或自定义属性驱动:nth-child的参数 - 如果后端或构建时能确定范围，推荐生成对应 class，比运行时 JS 操控更稳定
- 真要用 JS，别用
querySelectorAll('*')再手动 slice，直接parent.children取 HTMLCollection 更准（它反映真实 DOM 顺序）
:nth-child(-n+5):nth-child(n+3)当成一个固定模式记下来就行。真正麻烦的从来不是这行代码，而是你没意识到中间混入的注释节点、空文本节点、或 SSR 渲染时多出来的换行符也会被算进:nth-child的计数里。 - 若 HTML 结构是
