移动端列表:nth-child不生效主因是动态渲染导致DOM顺序错乱或父容器混入干扰节点；应优先用:nth-of-type()替代，并确保父选择器精确、避免结构污染。
移动端列表交替颜色为什么 nth-child 不生效
因为很多移动端列表是用 JavaScript 动态渲染的（比如 Vue 的 v-for、React 的 map()），DOM 节点插入时可能没按预期顺序，或者父容器里混入了其他元素（如空文本节点、注释、隐藏的 div），导致 :nth-child(2n) 算错位置。
常见错误现象：li:nth-child(2n) 只给第 1、3、5 个上色，或者完全不生效；iOS Safari 下偶现失效；列表滚动后颜色错乱。
- 检查父容器是否干净：用浏览器开发者工具看
ul或ol直接子节点是不是全是li，中间有没有script、comment或换行产生的文本节点 - 优先用
:nth-of-type()替代:nth-child()，它只计算同类型标签（比如只算li），对插入的非li元素免疫 - 如果用 Flex 布局，确保没加
flex-direction: column-reverse—— 这会让:nth-child按视觉逆序匹配，但计算仍按 DOM 顺序
CSS 实现交替色的最小可靠写法
不用 JS、不依赖框架、兼容 iOS 12+ 和 Android Chrome，最简方案就是用 :nth-of-type() 配合类名兜底。
使用场景：新闻流、商品列表、聊天消息气泡（需区分发送方）、设置项菜单。
立即学习“前端免费学习笔记（深入）”；
ul.message-list > li:nth-of-type(2n) {
background-color: #f9f9f9;
}
ul.message-list > li:nth-of-type(2n+1) {
background-color: #ffffff;
}-
:nth-of-type(2n)匹配第 2、4、6… 个li，比:nth-child更鲁棒 - 务必写上父选择器（如
ul.message-list > li），避免全局污染或被其他样式覆盖 - 移动端要注意
background-color不会触发硬件加速，若列表滚动卡顿，可加will-change: background-color，但仅在必要时启用
当列表项高度不一致时颜色怎么对齐
交替色本质是按 DOM 序号，不是按屏幕位置。所以当某条 li 高度特别大（比如含长图或折叠文案），视觉上它可能占据两屏，但颜色还是按“它是第几个节点”来定 —— 这没问题，也不该改。
真正容易踩的坑是：有人试图用 JS 监听滚动，动态加 class 控制“当前屏内奇偶”，这既难维护又掉帧。
- 放弃“视觉奇偶”思维，接受“结构奇偶”是标准做法；设计稿也应适配这种逻辑
- 若必须按视觉分隔（比如每屏显示 3 条，想让每屏首条统一色），那已超出 CSS 能力范围，得用 JS 控制 class，但要配合
IntersectionObserver，别用scroll事件 - 高度不一致时，
background-color本身不会出错，但要注意border或box-shadow可能造成相邻项颜色边界模糊，建议用纯背景色 + 足够间距
Vue/React 项目里要不要在模板里加 class
没必要。CSS 的 :nth-of-type 完全能胜任，加 class 属于重复劳动，还容易和响应式断点、状态 class（如 is-active）冲突。
例外情况：需要服务端渲染（SSR）时首屏直出不同色，而 CSS 尚未加载 —— 此时可在服务端用 index % 2 === 0 注入 class="bg-even"，但客户端 CSS 加载后应立即接管，避免闪动。
- React 中不要在
map()里写className={`item ${i % 2 === 0 ? 'even' : 'odd'}`}，除非你明确要支持 IE11 且不能用任何 polyfill - Vue 模板里同理，避免
:class="{ 'bg-alt': index % 2 }"—— 多余，且破坏样式封装性 - 如果用了 CSS-in-JS（如 styled-components），记得它的
&:nth-of-type写法和原生一样，但需确认生成的 className 是否影响选择器权重
复杂点在于：有些 UI 组件库（比如 Ant Design Mobile）的 List.Item 内部套了多层 div，导致你写的 ul > li:nth-of-type() 根本选不到 —— 这时候得看组件文档是否支持透传 class，或者改用 data-* 属性配合属性选择器。
