应将 :nth-child(odd) 作用于 <li> 元素以实现斑马纹效果，如 ol li:nth-child(odd) { background-color: #f9f9f9; }，并确保 list-style-position 保持默认 outside 以避免序号被背景遮挡。
用 :nth-child(odd) 选中奇数项并设置 background-color
HTML 的 <ol> 本身不支持斑马纹，必须靠 CSS 控制。最直接的方式是给 <li> 设置交替背景色，核心是利用 :nth-child(odd) 或 :nth-child(even) 伪类。
注意：必须作用在 <li> 上，而不是 <ol>；否则整个列表块统一变色，达不到“条纹”效果。
-
ol li:nth-child(odd)匹配第 1、3、5… 个<li> -
ol li:nth-child(even)匹配第 2、4、6… 个<li> - 若
<ol>内有其他元素（如注释、空格文本节点），:nth-child仍按 DOM 位置计数，但<li>是唯一合法子元素，通常不受干扰
避免被 list-style-position: inside 破坏视觉对齐
默认 list-style-position 是 outside，序号在内容框外；设为 inside 时，序号进入内容区，但背景色会覆盖序号区域，导致数字发虚或错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 保持
list-style-position: outside（默认值，无需显式写） - 如果必须用
inside，给<li>加padding-left预留空间，并确保背景色不遮挡序号 - 更稳妥的做法：用
counter-reset+::before自定义序号，完全掌控布局
兼容性要注意 IE8 及更早版本不支持 :nth-child
IE9+、Edge、Chrome、Firefox、Safari 均支持 :nth-child()。但如果你的项目仍需支持 IE8，不能用该伪类。
替代方案只有 JS 动态加 class：
document.querySelectorAll('ol li').forEach((el, i) => {
el.classList.toggle('zebra', i % 2 === 0);
});
对应 CSS 写 ol li.zebra { background-color: #f5f5f5; }。不过现在绝大多数场景已无需考虑 IE8。
background-color 不影响计数器或语义，但可能干扰可访问性
斑马纹纯属视觉增强，不影响 <ol> 的语义和屏幕阅读器读出的序号。但要注意两点：
- 颜色对比度必须满足 WCAG AA 标准（文本与背景对比度 ≥ 4.5:1），否则浅灰背景配深灰文字可能看不清
- 不要仅靠颜色区分信息——比如把“错误项”全标红底，而忽略其他视觉提示（图标、字体粗细等）
- 如果列表项高度不一致（含图片、多行文本），纯
background-color会显得不整齐，此时可考虑用box-shadow: inset模拟条纹，控制更精细
ol li:nth-child(odd) { background-color: #f9f9f9; }
ol li:nth-child(even) { background-color: #ffffff; }
ol li { margin: 0; padding: 8px 12px; }
关键不是写得多，而是确认 <li> 没被其他样式（比如全局重置里的 background: none）意外覆盖。 
