在 CSS3 中，`odd` 和 `even` 是两个非常实用的选择器伪类，它们能够帮助开发者更高效地对 HTML 元素进行样式定义。通过结合表格或列表结构使用，可以轻松实现隔行变色的效果，提升页面的可读性和美观度。

什么是 `odd` 和 `even`？

- `odd`：匹配所有奇数索引的元素（从 1 开始计数）。

- `even`：匹配所有偶数索引的元素（从 0 开始计数）。

这两个伪类通常用于表格 (`

`、`
`) 等需要区分行或项的场景。

实际应用场景

假设我们有一个简单的无序列表：

```html

• 苹果
• 香蕉
• 橙子
• 葡萄
• 草莓

```

通过使用 `odd` 和 `even`，我们可以为列表项设置不同的背景颜色，从而让内容更加清晰易读：

```css

ul li {

padding: 10px;

margin-bottom: 5px;

}

ul li:nth-child(odd) {

background-color: f9f9f9; / 奇数行背景色 /

}

ul li:nth-child(even) {

background-color: e9e9e9; / 偶数行背景色 /

}

```

这样，列表中的每一项会交替显示浅灰色和更深一些的灰色，视觉效果更加友好。

如何选择 `nth-child` 还是直接使用 `odd`/`even`？

实际上，`odd` 和 `even` 是 `nth-child` 的简化写法。例如：

- `nth-child(odd)` 等价于 `odd`

- `nth-child(even)` 等价于 `even`

虽然两者功能完全一致，但直接使用 `odd` 和 `even` 可以使代码更简洁直观，尤其适合初学者或者需要快速实现需求的场景。

注意事项

1. 浏览器兼容性：

- `nth-child`（包括 `odd` 和 `even`）已被现代浏览器广泛支持，但在极少数老旧浏览器中可能存在兼容问题。

- 如果需要确保兼容性，建议使用 JavaScript 或其他方法作为备选方案。

2. 避免误用：

- `odd` 和 `even` 是基于索引计算的，因此必须作用于有明确顺序关系的父容器内（如 `

`、`
` 或 `

总结

`odd` 和 `even` 是 CSS3 提供的强大工具，能够显著提高开发效率并优化用户体验。无论是构建数据表格还是美化列表内容，合理运用它们都能事半功倍。希望本文能帮助你更好地掌握这一技巧，并将其灵活运用于实际项目中！