nth-child(odd/even)不生效主因是父容器混入非目标子元素，应改用nth-of-type或清理HTML结构；CSS变量可统一管理交替色但不能动态计算；需注意IE兼容性、状态样式覆盖及深色模式适配。
nth-child(odd) 和 nth-child(even) 为什么有时不生效
常见错误是父容器里混入了其他类型子元素（比如 <div>、<p> 或注释），导致 nth-child 计数错位。它按 DOM 顺序数所有子节点，不是只数 <li>。
- 用
nth-of-type(odd)更稳妥——它只统计同类型标签（如只数<li>） - 确保列表结构干净：不要在
<ul>里插非<li>元素 - 检查是否被更高优先级 CSS 覆盖（比如内联样式或
!important）
CSS 变量怎么和 nth-child 配合动态换色
变量本身不能直接参与 nth-child 的逻辑判断，但可以用来统一管理颜色值，让交替色更容易维护。
- 定义两个变量：
--list-color-1: #f0f0f0;和--list-color-2: #e0e0e0; - 在规则里分别赋值：
li:nth-child(odd) { background-color: var(--list-color-1); } - 改配色时只需调两个变量，不用改多处颜色值
- 注意：变量不能写成
var(--list-color-nth)并指望它自动切换——CSS 没有运行时表达式
兼容性与性能要注意什么
nth-child 在 IE9+ 完全支持，nth-of-type 也是同样范围；变量（var()）在 IE 完全不支持，需另配 fallback。
- 如果要兼容 IE，放弃 CSS 变量，直接写死颜色：
li:nth-child(odd) { background: #f5f5f5; } -
nth-child是纯 CSS 计算，无运行时开销，比 JS 动态加 class 更轻量 - 避免写成
li:nth-child(2n+1)这类复杂公式——可读性差，且和odd等价，没必要
实际项目中容易漏掉的细节
交替色在悬停、选中、禁用等状态下的表现常被忽略，导致视觉断裂。
立即学习“前端免费学习笔记（深入）”；
- 记得给
li:hover单独设背景，否则悬停时会盖不住底层交替色 - 如果列表支持多选，
:checked状态的样式要覆盖交替色，不然选中项看不清 - 深色模式下，交替色对比度可能不足，建议用
prefers-color-scheme重置变量值 - 打印样式表里默认会丢掉背景色，需要显式加
@media print { background-color: #fff !important; }如果真要打出来
