应优先使用 li:nth-of-type(odd) 实现斑马纹，因其仅按 li 元素自身顺序编号，避免因父容器中混入 div、注释或文本节点导致序号错位；:nth-child 则基于所有同级子元素计数，易受结构干扰。
怎么用 :nth-child 给列表加斑马纹
直接写 li:nth-child(odd) 或 li:nth-child(even) 就能交替上色，但要注意它数的是父元素下所有同级子元素，不是只数 li。比如父容器里夹了个 div 或标题 h3，序号就会错位。
-
li:nth-child(odd)选中第1、3、5…个子元素，且该元素必须是li；如果第2个子元素是div，那第3个li实际是第3个子元素，仍会被匹配 - 更稳妥的写法是用
li:nth-of-type(odd)—— 它只按li自身顺序编号，无视其他兄弟元素 - 常见错误：写成
ul li:nth-child(2n)，但2n和even等价，可读性差，建议优先用even/odd
为什么 :nth-child 有时不生效
最常踩的坑是 HTML 结构不“干净”：列表项之间混入了注释、空格文本节点，或者用了 flex / grid 布局后改变了渲染顺序（但伪类仍按 DOM 顺序计算）。
- 检查开发者工具里
li的实际父级子节点顺序，右键“检查元素”看是否被注释或换行符占位 - 服务端渲染或模板引擎（如 Vue/JSX）可能插入看不见的文本节点，导致
:nth-child(2)匹配不到第二个li - 若用
display: contents或visibility: hidden隐藏了某些li，它们仍参与:nth-child计数
CSS 斑马纹在不同浏览器里的兼容性
:nth-child 在 IE9+、所有现代浏览器都支持，但 IE8 及以下完全不认。如果项目还要兼容 IE8，就得用 JS 动态加 class 或服务端生成带 class 的 HTML。
-
:nth-of-type兼容性与:nth-child一致，IE9+ 支持 - 不要用
:nth-child(an+b)的复杂表达式（如:nth-child(3n+2)）做核心样式，老版本安卓 WebView 可能解析异常 - 在 CSS-in-JS 方案（如 styled-components）里，确保插件没把伪类转义或忽略
要不要用 JavaScript 动态加斑马纹 class
纯 CSS 足够时，没必要 JS。但如果你的列表是动态增删的，又依赖某类数据状态（比如只给“已完成”项加条纹），那 CSS 伪类就无能为力了。
- 静态列表、服务端直出、内容不变 → 用
li:nth-of-type(odd)最轻量 - 前端分页、虚拟滚动、拖拽排序 → CSS 伪类依然可用，只要 DOM 节点顺序正确
- 需要响应数据变化（如勾选后切换条纹颜色）→ 改用 class 控制，比如
li.completed:nth-of-type(odd)
:nth-child 效果。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
