:nth-child(2n)不生效是因为它匹配父元素下第n个子元素而非同类型元素，若中间有其他标签或注释会导致错位；推荐用:nth-of-type()或添加类名控制，:nth-child(even)更易读且等价于:nth-child(2n)。
为什么 :nth-child(2n) 有时不生效
不是选择器写错了，而是你忘了它匹配的是「父元素下的第 n 个子元素」，不是「第 n 行表格/列表项」。如果 <li> 前面插了 <div> 或注释节点，:nth-child(2n) 就会错位——比如第 2 个子元素其实是那个 <div>，根本轮不到 <li>。
常见错误现象：background 只在前几行交替，后面全变成同色；或者奇偶完全反了。
- 确保目标元素是父容器下连续、无干扰的子元素（删掉多余注释、空
<div>、服务端注入的占位节点） - 更稳妥的写法是用
:nth-of-type()，它只看同类型标签（如所有<li>），忽略中间的其他标签 - 如果结构复杂（比如列表项里混着
<li class="divider">），直接给需要样式的数据项加类，比如<li class="item">，再写.item:nth-of-type(2n)
用 :nth-child(2n) 还是 :nth-child(even)
两者等价，浏览器解析后都转成相同逻辑，但 even 和 odd 更易读、少打字、不易算错系数。不过要注意：它们只接受关键字或 an+b 形式，不能写成 :nth-child(2)（那是选第 2 个，不是所有偶数）。
-
:nth-child(even)等价于:nth-child(2n)，推荐优先用前者 -
:nth-child(odd)等价于:nth-child(2n+1)，别手抖写成2n-1（会漏掉第 1 个） - 如果要从第 3 行开始交替（比如跳过标题行），用
:nth-child(2n+3)，而不是改父容器——那样容易影响 JS 获取元素逻辑
长列表滚动时背景闪烁或卡顿
纯 CSS 交替背景本身不触发重排，但如果你在 :nth-child 规则里写了 box-shadow、transform 或过渡动画，滚动时 GPU 会频繁重绘，尤其在低端设备上明显卡顿。
立即学习“前端免费学习笔记（深入）”；
- 交替背景只用
background-color，避免叠加background-image或渐变（渐变本身没问题，但多层叠加会升权） - 不要给
:nth-child()规则加transition，它没意义——背景色切换不是交互触发的 - 如果列表用了虚拟滚动（如
react-window），确保每一帧渲染的 DOM 是稳定、可复用的，否则:nth-child的序号会随重渲染乱跳
兼容性与 SSR 场景下的坑
:nth-child() 在 IE9+、所有现代浏览器都支持，但 SSR（服务端渲染）时如果 HTML 结构和客户端不一致（比如服务端没渲染某些条件项），会导致首屏样式错乱，且控制台不会报错。
- 检查服务端吐出的 HTML 中，目标列表是否真有连续的
<li>，有没有被 React/Vue 的服务端条件判断提前截断 - 避免在 SSR 模板里用 JS 动态插入内容后再靠 CSS 选中——服务端看不到 JS，
:nth-child会按静态 HTML 计算 - 如果必须动态控制，宁可用 JS 批量加类（如
row-even/row-odd），虽然多写几行，但可控性强
真正麻烦的不是写法，是当列表结构被其他模块悄悄改动时，:nth-child 会无声失效——它不报错，也不警告，只是颜色突然不对了。
