nth-child(even)不生效最常见原因是目标元素非父容器直接子元素或父容器混杂其他节点；它按所有兄弟节点计数，非同类标签；应确保目标元素为连续唯一子元素，或改用nth-of-type(even)。
为什么 nth-child(even) 有时不生效
最常见原因是目标元素不是父容器的直接子元素，或者父容器里混杂了其他类型节点（比如 <p>、<div> 或注释）。nth-child 计数的是「所有兄弟节点」的位置，不是「同类标签」的位置。
例如：<ul><li>A</li><div>干扰项</div><li>B</li></ul> 中，第二个 <li> 实际是第 3 个子节点，nth-child(even) 会跳过它。
- 确保
<li>是<ul>或<ol>的**连续、唯一子元素** - 若结构无法调整，改用
nth-of-type(even)—— 它只统计同类型标签（如所有<li>） - 注意：IE8 不支持
nth-child，需 fallback 到 JS 或 class 手动标记
nth-child(even) 和 nth-child(odd) 的实际配色写法
两者常配合使用，但顺序有影响：CSS 规则从上到下匹配，后声明的会覆盖前面同优先级的样式。建议先写 odd，再写 even，避免偶数项被奇数规则意外覆盖。
ul li:nth-child(odd) { background-color: #f9f9f9; }
ul li:nth-child(even) { background-color: #eef2f7; }
- 颜色值推荐用十六进制或 rgba，避免命名色（如
lightgray）在不同浏览器渲染差异 - 若列表项有内边距或圆角，记得同时设置
border-radius和box-sizing: border-box防止背景溢出 - 移动端要注意缩放时像素对齐问题，深浅色对比度至少达 4.5:1（WCAG 标准）
替换 nth-child 的轻量级 JS 方案（兼容老浏览器）
当必须支持 IE8 或动态增删列表项时，CSS 伪类无法响应 DOM 变化，得靠 JS 补位。
立即学习“前端免费学习笔记（深入）”；
简单可靠的做法是遍历 <li> 并按索引设 class：
document.querySelectorAll('ul li').forEach((el, i) => {
el.classList.toggle('even', i % 2 === 0);
});
- 把这段代码放在
</body>前，或监听DOMContentLoaded - 后续新增
<li>时，需手动调用该逻辑，或封装为函数复用 - 避免用
innerHTML批量重写列表——会丢失绑定事件和已加的 class
表格中用 nth-child 实现隔行变色的坑
表格的 <tr> 通常嵌套在 <tbody> 下，但很多人直接写 table tr:nth-child(even)，结果失效——因为 <thead> 和 <tbody> 是并列子元素，<tr> 并非 <table> 的直接子节点。
- 正确写法：
tbody tr:nth-child(even)或tr:nth-of-type(even) - 如果表头也参与计数（比如想让第 2、4、6 行变色，含
<thead>中的<tr>），才用table tr:nth-child(even) - 注意：空行、
<tr style="display:none">仍会被nth-child计入，需额外过滤
nth-child 就容易漏掉边界情况。重点盯住父容器结构和浏览器支持表，别默认它“肯定管用”。 
