交替着色方案
" />
CSS 原生无法跨不同父容器对 元素进行全局奇偶序号着色；需借助 JavaScript 动态遍历并添加类名，再通过 CSS 控制样式，这是兼容性好、语义清晰且可维护的解决方案。
css 原生无法跨不同父容器对 `` 元素进行全局奇偶序号着色；需借助 javascript 动态遍历并添加类名，再通过 css 控制样式，这是兼容性好、语义清晰且可维护的解决方案。
在实际开发中，我们常遇到 DOM 结构由框架动态生成、 分布在多个嵌套层级或不同父容器中的场景。此时若希望所有 按文档流中的全局顺序（而非各自父容器内的局部顺序）实现交替背景色（如奇数位浅蓝、偶数位默认），仅靠 :nth-child(odd) 或 :nth-of-type() 是无效的——因为这些伪类仅作用于同一父元素下的子元素，无法跨越 .child 容器建立全局索引。
为什么纯 CSS 不可行？
- :nth-child(n) 判断的是元素在其直接父元素中的位置；
- :nth-of-type() 同样受限于父级上下文，且依赖标签类型而非全局序号；
- CSS 当前标准（包括 Level 4）尚未提供类似 :nth-match() 或跨树计数的原生能力；
- 浏览器兼容性层面，任何“取巧”的 CSS 方案（如利用 counter-increment 配合 ::before）均无法真正控制 background-color 等布局属性，且不可靠。
推荐方案：轻量 JavaScript + CSS 类控制
以下为简洁、高效、无依赖的实现：
<style>
.span-alternate-odd {
background-color: #add8e6; /* lightblue */
}
span {
display: block;
padding: 8px 12px;
}
</style>
<script>
// 获取全部 span 元素（按文档流顺序）
const spans = Array.from(document.querySelectorAll('span'));
// 为全局索引为偶数的 span 添加样式类（即第1、3、5…个，对应0、2、4…索引）
spans.forEach((span, index) => {
if (index % 2 === 0) {
span.classList.add('span-alternate-odd');
}
});
</script>✅ 优势说明：
- ✅ 精准序号：querySelectorAll('span') 返回 NodeList 按 HTML 文档顺序排列，天然支持跨父级全局计数；
- ✅ 性能友好：现代浏览器中 querySelectorAll 高度优化，千级 元素下执行时间低于 1ms；
- ✅ 可扩展性强：如需支持「每3个一组」或「反向交替」，仅需修改 index % n 条件即可；
- ✅ 样式解耦：着色逻辑完全交由 CSS 类管理，便于主题切换与维护。
注意事项与最佳实践
- ⚠️ 执行时机：确保脚本在 DOM 加载完成后运行（推荐置于
