交替着色（全局奇偶序号）
" />
CSS 无法直接对跨不同父容器的同级元素（如多个 内的 ）按全局顺序应用 :nth-child(odd/even)，因其作用域仅限于直接父元素；需借助 JavaScript 按 DOM 顺序统一分配类名实现真正交替着色。
css 无法直接对跨不同父容器的同级元素（如多个 `
` 内的 ``）按全局顺序应用 `:nth-child(odd/even)`，因其作用域仅限于直接父元素；需借助 javascript 按 dom 顺序统一分配类名实现真正交替着色。
在构建动态内容时（例如由 React、Vue 或纯 JS 渲染的列表），我们常遇到一种需求：所有 元素无论嵌套在哪个父容器中，都应按其在整个 DOM 中的出现顺序进行奇偶交替着色（如第 1、3、5… 个 为浅蓝色，第 2、4、6… 个为默认背景）。遗憾的是，纯 CSS 无法实现这一“跨父级全局序号”效果。
原因在于 CSS 的结构伪类（如 :nth-child()、:nth-of-type()）均以直接父元素为作用域。例如：
span:nth-child(odd) { background-color: lightblue; }只会匹配每个 .child 内部的第 1、3、5… 个子元素（且该子元素必须是 ），而非整个 #parent 下所有 的全局序号。因此，在多层嵌套结构中，该规则会重复计数，导致视觉上非连续交替。
✅ 正确解法：使用 JavaScript 按文档流顺序遍历并标记
推荐使用现代、简洁且兼容性良好的方案：
// 获取所有 span 元素（按文档顺序）
const spans = document.querySelectorAll('span');
// 转为数组，遍历并为偶数索引（即第 1、3、5… 个，索引 0、2、4…）添加样式类
Array.from(spans).forEach((span, index) => {
if (index % 2 === 0) {
span.classList.add('span-alt-odd');
}
});配套 CSS：
立即学习“前端免费学习笔记（深入）”；
.span-alt-odd {
background-color: lightblue;
}
span {
display: block;
padding: 8px;
margin: 2px 0;
}? 关键说明：
- document.querySelectorAll('span') 返回的是 静态 NodeList，按 HTML 文档顺序排列，天然满足“全局序号”要求；
- Array.from() 将其转为真数组，便于使用 forEach 和索引操作；
- 使用 index % 2 === 0 标记第 1、3、5… 个元素（即奇数位，索引从 0 开始），语义清晰且性能高效；
- 该方案完全不依赖 DOM 结构层级，即使 分散在
、 、 等任意嵌套中，依然精准生效。⚠️ 注意事项：
- 若页面后续通过 JS 动态插入新 ，需重新执行上述逻辑（可封装为函数，如 applySpanAlternation()，并在插入后调用）；
- 如需支持深色模式或主题切换，建议将颜色定义为 CSS 自定义属性（如 --alt-bg: lightblue），便于统一维护；
- 在 SSR（服务端渲染）场景中，若首屏需立即生效，应确保脚本在 DOM 加载完成后执行（如置于 DOMContentLoaded 事件或 底部）。
总结：当 CSS 的选择器能力触及结构性边界时，轻量级 JavaScript 是最可靠、可维护且语义明确的补充方案。本例不仅解决了交替着色问题，更体现了「用合适工具解决合适问题」的前端工程实践原则。
