移动端 :nth-child(odd) 不生效是因 webkit 内核对伪类解析存在兼容性差异，尤其在动态插入或 flex 布局下易错判子元素序号；应改用 :nth-of-type(odd) 并确保结构干净、key 唯一、避免低透明度色值。
移动端列表用 :nth-child(odd) 为什么有时不生效？
因为移动端 WebKit 内核（尤其是旧版 Safari 和部分安卓 WebView）对伪类解析有兼容性差异，:nth-child(odd) 在动态插入或 flex 布局下可能错判“子元素序号”。更稳妥的做法是用 :nth-of-type(odd) —— 它只看同类型标签（比如都是 <li>），不受中间插入的 <div> 或注释干扰。
<p>实操建议：</p>
<ul>
<li>确保列表结构干净：每个 <code><li> 是 <ul></ul> 或 <ol></ol> 的直接子元素，避免包裹层干扰序号计算
item--odd），而非依赖 CSS 伪类斑马纹在高 DPI 屏幕上发虚怎么办？
纯色背景 + 半透明阴影或 border 会因像素对齐问题出现模糊。本质是 CSS 渲染时把 1px 边框或背景色铺在非整数物理像素上。
解决方法：
- 用
transform: translateZ(0)强制开启硬件加速，让渲染走 GPU，提升边缘锐度 - 避免用
rgba(0,0,0,0.05)这类极低透明度做条纹底色——改用#f9f9f9和#ffffff这类明确色值 - 如果必须用渐变模拟条纹（比如想加细微纹理），用
background-image: linear-gradient(0deg, #f8f8f8 0%, #f8f8f8 50%, #fff 50%, #fff 100%)，并设background-size: 100% 2em（高度匹配行高）
React/Vue 列表中如何避免重复渲染导致斑马纹错乱？
关键不是 CSS，而是 key 值没写对。当列表项顺序变化或增删时，若 key 不唯一或不稳定（比如用 index），虚拟 DOM diff 会复用错误节点，导致奇偶 class 错位。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
正确做法：
- 永远用数据本身的唯一标识（如
item.id）作key，不用index - 服务端返回数据时确保
id是字符串类型（数字 id 在某些 React 版本下可能被误判为 unstable key） - 如果数据无 ID，用
crypto.randomUUID()（现代浏览器）或Math.random().toString(36).substr(2, 9)生成临时 key，但仅限静态列表
要不要用 JavaScript 动态计算奇偶？
绝大多数情况不需要。纯 CSS 方案足够可靠，且性能更好。JS 方案只在两种场景值得考虑：
- 列表项高度不固定（比如含图片或折叠内容），需要根据实际渲染高度重新分配条纹——这时用 IntersectionObserver 监听位置，再批量打 class
- 需要支持 IE11（已淘汰，但仍有政企内网场景），
:nth-child兼容性差，可用document.querySelectorAll('li').forEach((el, i) => el.classList.toggle('zebra-odd', i % 2 === 0))
注意：JS 计算必须等所有内容 layout 完成后执行（比如用 requestAnimationFrame 包裹），否则取到的是初始高度，条纹仍会错位。
