: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) 可以为元素的奇数位置和偶数位置分别设置不同样式，常用于表格、列表等需要交替显示样式的场景。
CSS 提供了 :nth-child(odd) 和 :nth-child(even) 伪类来选择奇数位和偶数位的子元素。
• odd：匹配第 1、3、5… 等奇数位置的元素这是最常见的应用场景。比如让表格的奇数行和偶数行背景色不同，提升可读性。
示例代码：
立即学习“前端免费学习笔记（深入）”；
table tr:nth-child(odd) {
background-color: #f0f0f0;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
这样表格的每一行就会呈现一深一浅的交替效果。
除了表格，无序或有序列表也可以使用这种方式设置视觉区分。
示例：
ul li:nth-child(odd) {
background: #e8f4ff;
padding: 8px;
}
ul li:nth-child(even) {
background: #f9f9f9;
padding: 8px;
}
用户浏览时更容易区分每个列表项，尤其在条目较多时更清晰。
• 索引从1开始：CSS 中第一个子元素是位置 1（奇数），所以 :nth-child(odd) 会选中它
• 确保目标元素是同级的直接子元素，否则选择器可能不生效
• 可以用 2n+1 替代 odd，用 2n 替代 even，两者等价
基本上就这些。合理使用 :nth-child(odd) 和 :nth-child(even)，能让页面的结构信息更清晰，视觉体验更好。不复杂但容易忽略细节。
以上就是如何通过css:nth-child(odd)实现奇偶样式的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
276
收藏
