1. 基本原理：CSS nth-child 的工作机制
1.1 什么是 nth-child 伪类
在 CSS 中，nth-child 是一种按照父元素中的子元素位置来选择目标的伪类。它无需添加额外类名，就能把同类样式聚合到一组元素上，从而实现统一的视觉风格。
理解 nth-child 的核心在于位置概念：它依据元素在父节点中的序号（1、2、3...）来匹配，不关心具体的标签名。这让你用同一个规则覆盖多种结构中的行或项。
需要注意的是，位置是相对于父容器的子元素集合，且 计数会包含所有类型的子元素，因此在复杂结构里往往需要限制到特定元素上，例如将规则限定在 tbody tr 上，以避免表头/标题行也被算作交替对象。
2. 表格中的交替行：实现思路与示例
2.1 使用 tbody 与 tr 的交替选择
在表格场景中，把交替背景应用到 tbody 的 tr，可以确保表头（thead）不受影响，并且滚动表体时样式保持一致。
通过结合 even 与 odd 两种取值，可以在同一个层级实现完整的前后两种颜色交替效果，从而提升数据可读性与视觉层级。
下面是一个典型的实现示例：tr:nth-child(even) 用来设置偶数行，tr:nth-child(odd) 用来设置奇数行，确保表格可读性在不同主题下保持一致。
table { border-collapse: collapse; width: 100%; }
tbody tr:nth-child(even) { background-color: #f2f2f2; }
tbody tr:nth-child(odd) { background-color: #ffffff; }要点总结：尽量限定在 tbody，以避免对表头造成影响；若表格结构中存在多层级的行，需要再结合 nth-of-type 做进一步筛选。
3. 列表中的交替项：从 UL/OL 到 LI
3.1 应用在无序列表与有序列表上的方法
同样的原理也适用于 无序列表（ul） 和 有序列表（ol），只要选择器作用于 li，就能实现交替背景色的效果。
通过将偶数项与奇数项分别设定不同背景色，可以在列表中清晰区分项的层级与序列感，尤其在长列表或数据清单中尤为有效。
示例做法：li:nth-child(even) 与 li:nth-child(odd) 的组合，覆盖所有子项的交替着色。
ul > li:nth-child(even),
ol > li:nth-child(even) { background-color: #f7f9fc; }
ul > li:nth-child(odd),
ol > li:nth-child(odd) { background-color: #ffffff; }可访问性要点：在实现交替背景时，确保颜色对比度足够，并可在悬停状态提供额外的视觉反馈，以帮助屏幕阅读器用户与视觉用户保持一致的体验。
4. 兼容性与进阶技巧
4.1 与 nth-of-type 的配合使用
在页面中出现混排元素时，nth-child 可能需要进一步的区分，这时可以引入 nth-of-type 来按标签类型分组选择。这种组合可以实现更复杂的样式模式，例如同一父级下不同类型元素的分组着色。
进阶示例：tbody tr:nth-of-type(odd):nth-child(3n+1) 组合可以让“每三行的第一行”在视觉上更加突出，适合需要在复杂表格中强调某些数据行的场景。
/***** 复杂组合示例 *****/
tbody tr:nth-of-type(odd):nth-child(3n+1) { background: #e9f5ff; }浏览器兼容性方面，主流浏览器对 nth-child 与 nth-of-type 都有良好支持，IE9+ 及现代浏览器表现一致。对极早期浏览器需要回退策略或渐进增强方案。
5. 实战技巧与可访问性
5.1 设计、对比度与悬停效果的平衡
在实际项目中，保持简洁且可维护的选择器结构至关重要，避免过于复杂的组合导致维护成本增加。简单的选择器不仅易于调试，也有利于浏览器的渲染性能。
使用 CSS 变量 来管理交替背景色，可以实现主题切换而不改变现有逻辑，例如通过定义 --row-even 与 --row-odd，在不同主题之间无缝切换。
:root { --row-even: #f3f6fb; --row-odd: #ffffff; }
tbody tr:nth-child(even) { background: var(--row-even); }
tbody tr:nth-child(odd) { background: var(--row-odd); }在大数据表格场景下，交替着色通常不会影响可访问性，但应确保对比度在不同背景色下保持明确，必要时配合 悬停、焦点样式 等交互反馈，以提升可用性。
