CSS列表奇偶项背景设置方法

或
，且内部只有
1. ，否则序号容易偏移

为什么 :nth-of-type 有时比 :nth-child 更稳妥

当列表中存在非

• li:nth-of-type(odd) → 只对第 1、3、5… 个
• 生效，无视中间夹杂的其他标签
• 注意：不能写成 ul li:nth-of-type(odd)，因为
• 的兄弟节点必须是其他
• 才算“同类型”；若父容器下还有

  等，不影响计数

• 兼容性没问题，IE9+ 都支持

常见错误：背景没生效或全白/全灰

最常踩的坑是 CSS 优先级或继承干扰。比如父级设了 background-color，或者某条规则用了 !important 锁死颜色；也可能是伪类写法有误（漏空格、括号不匹配）。

• 检查是否误写成 li:nth-child(odd){}（少冒号）→ 正确是 li:nth-child(odd){}
• 确认没有更高优先级的选择器覆盖，例如 ul li { background: #fff; } 会压过 :nth-child 规则
• 避免在
• 上同时设 background 和 background-color，后者会被前者覆盖

ul li:nth-child(odd) {
  background-color: #f5f5f5;
}
ul li:nth-child(even) {
  background-color: #ffffff;
}

如果列表结构复杂、动态插入内容频繁，或者需要兼容老版本 IE（:nth-child 或 :nth-of-type 就够用，别绕弯。真正要注意的，是 DOM 结构是否干净。

好了，本文到此结束，带大家了解了《CSS列表奇偶项背景设置方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！