nth-child(odd)不生效主因是父元素中存在非li子元素（如div、p、注释、空格文本等），导致li的实际序号非奇数；应改用li:nth-of-type(odd)或检查dom结构。
nth-child(odd) 为什么有时不生效
直接写 li:nth-child(odd) 却没变色？大概率是 HTML 结构干扰了“序号”计算。:nth-child() 看的是父元素下所有子元素的物理顺序，不是第几个 li。
比如父容器里混着 div、p 或注释节点，那第 1 个 li 可能是第 3 个子元素，根本轮不到 odd 匹配它。
- 检查开发者工具里该
li的实际nth-child(N)值（右键 → “检查”，看 computed 样式里的匹配提示） - 若父元素中只有
li，但开头有注释或空格文本节点，用li:nth-of-type(odd)更稳——它只数同类型标签 - React/Vue 渲染时自动插入的
<!-- -->或text node也会破坏nth-child序列，此时必须改用nth-of-type
CSS 斑马线在表格中怎么写才可靠
表格里用 tr:nth-child(odd) 是常见写法，但它对带 thead/tfoot 的表容易出错——thead 里的 tr 也被计入“奇偶”，导致 tbody 第一行反而被跳过。
- 正确做法：给
tbody tr:nth-child(odd)单独设样式，避开表头干扰 - 如果用了
colgroup或隐藏行（display: none），nth-child仍会计入它们；而visibility: hidden不影响计数 - 需要兼容 IE8？别用
nth-child，改用 JS 动态加 class 或服务端渲染 class
nth-child(odd) 和 nth-child(2n+1) 有区别吗
没有视觉或行为区别，两者完全等价。但写法不同会影响可读性和维护性。
-
odd更直观，适合简单场景；2n+1显式暴露了数学逻辑，方便扩展（比如2n+2是偶数行，3n是每三行一个） - 部分老版本 Safari 对
odd解析不稳定，生产环境建议统一用2n+1避免意外 - PostCSS 或构建工具（如 Tailwind）可能不识别
odd字符串，转义或配置需额外处理
用 nth-child 实现“从第二行开始的奇数行”
需求很真实：第一行标题不动，后面数据行才斑马。不能靠删 class 或 JS 控制，纯 CSS 就得算偏移。
- 目标是第 2、4、6… 行（即数据区的第 1、2、3… 行中的奇数位），对应全局序号为
2, 4, 6...→ 公式是2n - 所以写
li:nth-child(2n)，而不是nth-child(odd)加:not(:first-child)—— 后者在有其他兄弟节点时会失效 - 如果第一行是
li.header，且你只想选它之后的li.item，更稳妥的是：li.item:nth-of-type(odd)，前提是 DOM 中.item连续出现
真正麻烦的从来不是写对那一行 CSS，而是搞清浏览器到底把谁当“第 N 个孩子”。DOM 树一动，nth-child 就可能悄无声息地偏移两行。动手前先看一眼 Elements 面板里的子节点构成，比查文档快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
