可用li:nth-child(n+3):nth-child(-n+5)选中第3至第5个li元素，但需确保其为父元素连续子元素且无注释或非li标签干扰；若DOM不“干净”，应改用li:nth-of-type(n+3):nth-of-type(-n+5)。
怎样用 :nth-child() 选中第3到第5个列表项
直接写 :nth-child(n+3):nth-child(-n+5) 是可行的，但必须理解它匹配的是「同时满足两个条件」的单个元素——即既是第3个或之后，又是第5个或之前。这等价于第3、4、5个元素，但前提是这些位置上确实存在子元素且类型一致（比如都是 <li>）。
常见错误是把它套在 <ul> 上却忘了：伪类作用于子元素本身，不是父容器。样式要写在 li:nth-child(n+3):nth-child(-n+5) 上，而不是 ul:nth-child(...)。
- 必须确保目标元素是父元素的**连续子元素**，中间不能有其他类型标签（如
<div>或注释）打断计数 - 如果列表里混有
<li>和<span>，:nth-child()仍按所有子元素统一编号，此时应改用:nth-of-type() -
n从 0 开始代入：例如n+3对应 3,4,5,…；-n+5对应 5,4,3,2,1… 交集就是 3–5
为什么有时候第3–5个没生效？检查 DOM 结构是否“干净”
最常踩的坑是 HTML 里有隐藏内容干扰了序号计算。比如：
<ul> <li>一</li> <li>二</li> <!-- 注释也会被算作一个子节点 --> <li>三</li> <li>四</li> <li>五</li> </ul>
这时第三个 <li> 实际是第4个子节点，:nth-child(3) 就匹配不到它。解决方法只有两个：
立即学习“前端免费学习笔记（深入）”；
- 删掉注释、空文本节点或无关标签（如
<div style="display:none">） - 改用
li:nth-of-type(n+3):nth-of-type(-n+5)—— 它只统计<li>类型的兄弟元素，忽略其他
:nth-child() 和 :nth-of-type() 到底该选哪个
关键区别在于计数依据：:nth-child() 数的是「第几个子元素」，:nth-of-type() 数的是「第几个同类型子元素」。
- 纯
<li>列表（无干扰）：两者效果一致，任选 - 含标题
<h3>、分隔线<hr>或服务端注入的占位符：必须用:nth-of-type() - 动态渲染（如 Vue/React）可能插入 comment 节点，此时
:nth-child()极易失效 - 性能无差异，但可维护性上
:nth-of-type()更贴近语义意图
更灵活的替代方案：用 CSS 自定义属性 + JS 控制区间
当区间需要动态变化（比如“显示当前页的5条”），纯 CSS 的 n+start 表达式就僵住了。这时可以结合 JS 设置属性：
ul.set-range li {
opacity: 0.4;
}
ul.set-range li:nth-child(n+3):nth-child(-n+5) {
opacity: 1;
}然后 JS 根据需要切换类名或修改 style="--start: 3; --end: 5"，再配合 CSS 变量和 @property（需现代浏览器支持）。不过要注意：目前没有原生 CSS 方式让 :nth-child() 接收变量，所以真要动态，JS 驱动仍是主流解法。
真正容易被忽略的是：CSS 选择器的「区间」本质是静态快照，它不响应元素增删或排序变化。一旦列表重排或异步加载新项，就得重新评估是否还适用这套规则。
