:nth-child(2n)不生效是因为它匹配父元素下第n个子元素而非同类型元素，若中间有其他标签或注释会导致错位；推荐用:nth-of-type()或添加类名控制，:nth-child(even)更易读且等价于:nth-child(2n)。

为什么 :nth-child(2n) 有时不生效

不是选择器写错了，而是你忘了它匹配的是「父元素下的第 n 个子元素」，不是「第 n 行表格/列表项」。如果 <li> 前面插了 <div> 或注释节点，<code>:nth-child(2n) 就会错位——比如第 2 个子元素其实是那个 <div>，根本轮不到 <code><li>。

常见错误现象：background 只在前几行交替，后面全变成同色；或者奇偶完全反了。

• 确保目标元素是父容器下连续、无干扰的子元素（删掉多余注释、空 <div>、服务端注入的占位节点） <li>更稳妥的写法是用 <code>: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 会频繁重绘，尤其在低端设备上明显卡顿。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 交替背景只用 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 会无声失效——它不报错，也不警告，只是颜色突然不对了。