:nth-child(odd)用于选中奇数位置元素，:nth-child(even)选中偶数位置元素，常用于表格和列表的隔行变色；语法中odd对应1、3、5…，even对应2、4、6…；示例包括table tr:nth-child(odd)设置背景色以提升可读性，ul li也可应用此样式增强区分度；需注意索引从1开始，目标元素应为同级子元素，且2n+1等价于odd，2n等价于even；合理使用可优化视觉效果。
使用 :nth-child(odd) 可以为元素的奇数位置和偶数位置分别设置不同样式，常用于表格、列表等需要交替显示样式的场景。
1. 奇偶选择器的基本语法
css 提供了 :nth-child(odd) 和 :nth-child(even) 伪类来选择奇数位和偶数位的子元素。
• odd：匹配第 1、3、5… 等奇数位置的元素
• even：匹配第 2、4、6… 等偶数位置的元素
2. 实现表格隔行变色
这是最常见的应用场景。比如让表格的奇数行和偶数行背景色不同，提升可读性。
示例代码：
立即学习“前端免费学习笔记（深入）”；
table tr:nth-child(odd) { background-color: #f0f0f0; } table tr:nth-child(even) { background-color: #ffffff; }
这样表格的每一行就会呈现一深一浅的交替效果。
3. 列表项的交替样式
除了表格，无序或有序列表也可以使用这种方式设置视觉区分。
示例：
ul li:nth-child(odd) { background: #e8f4ff; padding: 8px; } ul li:nth-child(even) { background: #f9f9f9; padding: 8px; }
用户浏览时更容易区分每个列表项，尤其在条目较多时更清晰。
4. 注意事项
• 索引从1开始：CSS 中第一个子元素是位置 1（奇数），所以 :nth-child(odd) 会选中它
• 确保目标元素是同级的直接子元素，否则选择器可能不生效
• 可以用 2n+1 替代 odd，用 2n 替代 even，两者等价
基本上就这些。合理使用 :nth-child(odd) 和 :nth-child(even)，能让页面的结构信息更清晰，视觉体验更好。不复杂但容易忽略细节。