:nth-child(odd)不生效主因是父元素中存在非li子元素（如div、p、注释、空格文本等），导致li实际序号非奇数；应改用li:nth-of-type(odd)或检查DOM结构。
为什么 :nth-child(odd) 有时不生效
直接写 li:nth-child(odd) { background: #f0f0f0; } 却发现偶数项变色、或者完全没反应，大概率是因为父元素里混入了其他类型子节点（比如 <p></p>、<div> 或注释）。<code>:nth-child() 数的是「所有子元素的序号」，不是「第几个 li」。
例如：
<ul> <li>Item 1</li> <p>Not a list item</p> <li>Item 2</li> <li>Item 3</li> </ul>这时
li:nth-child(odd) 只会匹配 Item 1（第1个子元素）和 Item 3（第4个子元素？不对——它其实是第4个子元素，4 是偶数），所以实际一个都不中。
- 检查父容器是否只包含目标标签（如纯
li） - 若存在干扰节点，改用
:nth-of-type(odd)更稳妥 - 浏览器兼容性没问题：Chrome 4+、Firefox 3.5+、Safari 3.2+ 都支持
:nth-child(odd) 和 :nth-of-type(odd) 怎么选
二者行为差异很实际：:nth-child(n) 看位置，:nth-of-type(n) 看同类型兄弟元素的顺序。
- 纯
ul > li结构下，两者效果一致，任选 - 如果列表里穿插了
<div class="separator"> 或标题 <code><li class="heading">，用:nth-of-type(odd)才能真正按li的顺序交替 - 注意：
:nth-of-type不认 class 或属性，只认 HTML 标签名
示例（安全写法）：
ul li:nth-of-type(odd) {
background-color: #f9f9f9;
}
需要从第二个 li 开始交替怎么办
默认 odd 从第1个开始，但设计稿有时要求「第2、4、6…项高亮」，即视觉上「偶数位背景色」。别硬套 even——它仍从第2个元素算起，而你要的是「第2个 li 起每两格一循环」。
立即学习“前端免费学习笔记（深入）”；
- 用公式表达更准：
:nth-child(2n)就是偶数位置；:nth-child(2n+2)表示「从第2个开始的偶数项」 - 更灵活的偏移写法：
:nth-child(2n+4)从第4个开始交替，适合跳过前几项导语 - 验证技巧：在 DevTools 里临时加
outline: 1px solid red，看哪些元素被命中
配合 JavaScript 动态增删列表时背景色错乱
DOM 改变后，:nth-child 会实时重算，但如果你用 innerHTML += '<li>new</li>' 这种粗暴拼接，可能破坏原有结构顺序，导致序号“重排”失真。
- 新增项时，优先用
appendChild()或insertAdjacentElement('beforeend', li)，确保插入到末尾且不扰动其他节点 - 删除某项后，无需手动重设 class——伪类自动生效，但得确认没残留空格文本节点（它们也算子元素！）
- 极端情况可强制重绘：
el.style.display = 'none'; el.offsetHeight; el.style.display = '';，但一般没必要
真正容易被忽略的是：服务端渲染或框架（如 Vue/React）中，若列表 key 冲突或复用不当，会导致 DOM 节点复用错位，此时伪类计算对象已非预期节点——这不属于 CSS 问题，但现象一模一样。
