:nth-child(n+3):nth-child(-n+5)选中第3至第5个元素，本质是取两个伪类的交集：前者匹配第3个起所有，后者匹配前5个，交集即为3~5。
为什么 :nth-child(n+3):nth-child(-n+5) 能选中第3到第5个元素
这个组合的本质是取两个伪类的交集，不是范围“或”操作。浏览器先找出所有满足 :nth-child(n+3) 的元素（即第3、4、5、6…），再在其中筛选出也满足 :nth-child(-n+5) 的（即第1、2、3、4、5），最终只剩第3、4、5个。
关键点在于：-n+y 实际等价于“前 y 个”，n+x 等价于“从第 x 个开始往后所有”。两者叠加才构成闭区间。
-
:nth-child(n+1):nth-child(-n+3)→ 选前3个（1~3） -
:nth-child(n+4):nth-child(-n+4)→ 只选第4个（单点） - 如果父容器只有2个子元素，
:nth-child(n+3):nth-child(-n+5)不会匹配任何元素——没有第3个可选，交集为空
用 :nth-child 选中间元素时最容易错的三件事
很多人以为“中间”就是视觉居中，但 CSS 没有“视觉位置感知”，只认 DOM 顺序和数量。真正能稳定选中的，只有已知总数时的固定索引段。
- 误把
:nth-of-type当成等价方案：它按元素类型（如div）计数，跳过其他标签，结果常和预期不符 - 忘记重置计数起点：该选择器始终以父元素为单位独立计算，嵌套结构中每个父容器都重新从1开始
- 在动态列表（如 React 渲染）中硬编码数字：DOM 数量变化后，原
n+3可能突然跨过目标区域，建议配合 JS 计算后加 class 更可靠
当总数未知时，“真·中间元素”的替代思路
比如想高亮一个列表里正中间那个 item（总数奇数时唯一，偶数时选靠前/靠后那个），纯 CSS 没有 mid() 函数，必须换策略。
- 服务端或 JS 预计算：给中间项加
class="is-middle"，CSS 写.is-middle { background: #ffeb3b; } - Flex 布局 +
margin: auto实现视觉居中（不改变选择逻辑，仅布局效果） - CSS Grid 中用
justify-items: center或place-items: center控制对齐，但仍是整容器行为，不针对单个子项做样式区分
注意：:nth-child(odd) 或 :nth-child(even) 是常见误解来源——它们选的是奇偶序号，不是位置中间。
:nth-child(n+x):nth-child(-n+y) 的性能与兼容性底线
这个写法在所有现代浏览器中都支持（Chrome 4+、Firefox 3.5+、Safari 3.1+、Edge 12+），IE9 也支持。性能上无明显开销，但需警惕过度嵌套使用。
- 不要连写多个交集如
:nth-child(n+2):nth-child(-n+4):nth-child(odd)—— 可读性骤降，且部分旧引擎可能解析异常 - 避免在深层嵌套的
div树中大量使用，尤其是移动端 WebView，CSS 选择器匹配复杂度随层级上升 - 若目标元素本身已有明确 class（如
item--featured），优先用 class 选择器，比:nth-child组合更直白、更易维护
真正麻烦的从来不是怎么写对这个公式，而是搞清你到底要选“DOM 序列里的第几个”，还是“用户眼里的正中间那个”——后者往往得走出 CSS 才能解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
