不能直接用单个伪类选“第3到第7个子元素”，需组合 :nth-child(n+3):not(:nth-child(n+8)) 实现；若只选特定类型（如 li），应改用 :nth-of-type；倒数区间用 :nth-last-child；复杂场景建议用 js 或 data 属性控制。
不能直接用单个伪类选“第3到第7个子元素”，必须组合 :nth-child 或 :nth-last-child 实现范围截取。
用 :nth-child(an+b) 截取连续区间
公式本身不支持“从第m个到第n个”的直写，但可通过逻辑交集模拟：先选“从第3个开始的所有”，再排除“第8个及之后的”。
-
:nth-child(n+3)匹配第3、4、5…个子元素（含所有后续） -
:not(:nth-child(n+8))排除第8、9、10…个（即保留前7个） - 合起来：
:nth-child(n+3):not(:nth-child(n+8))就是第3–7个
注意：这个选择器作用于父元素下的所有子元素（不分标签类型），如果中间夹着其他标签（比如 div 里混着 span 和 p），计数仍连续累加。
想只选特定类型元素的第3–7个？用 :nth-of-type
当你要控制的是某类标签（如只对 li 计数），:nth-of-type 更可靠：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
li:nth-of-type(n+3):not(li:nth-of-type(n+8))—— 只匹配第3到第7个li元素 - 它跳过其他类型兄弟（
div、span等不参与计数） - 但要求目标元素是同级、同标签；若
li被包裹在div里，就不再是父元素的直接li同辈，:nth-of-type会失效
避免踩坑：别混淆 :last-child 和范围选择
:last-child 只匹配父元素的最后一个子节点，和“倒数第3个”不是一回事；要选倒数区间，得用 :nth-last-child：
-
:nth-last-child(-n+3)→ 倒数第1、2、3个子元素（即最后三个） -
:nth-last-child(n+2):not(:nth-last-child(n+5))→ 倒数第2–4个 - 同样，它按所有子元素统一编号，不区分类型
如果你看到样式没生效，先检查 DOM 结构里目标元素是否真处于你认为的位置——浏览器 DevTools 的“Elements”面板右键“Scroll into view”能快速验证实际顺序。
复杂嵌套下优先用 JS 配合 querySelectorAll
CSS 的范围选择器在深层嵌套或动态插入内容时容易失准，尤其当父容器内有 display: contents、Shadow DOM 或框架生成的 wrapper 层时，> 和 :nth-child 都可能断掉。
- 纯 CSS 方案适合静态、结构可控的场景
- 需要精确按渲染顺序或真实可见顺序选中时，
document.querySelectorAll('parent > child')加.slice(2, 7)更可靠 - 现代项目中，这类需求往往更适合用
data-index或状态 class 控制，而非强依赖位置计算
真正难的不是写出公式，而是确认你写的那个“第5个”，在浏览器眼里确实是第5个——DOM 树、CSS 渲染树、可访问性树三者未必完全一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
