最常用且可靠的方案是: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><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <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 结构是
