直接用 ul > li:nth-of-type(odd) 和 ul > li:nth-of-type(even) 实现隔行变色，避免 nth-child 受空白文本节点干扰及嵌套列表样式污染，兼容 ie9+。
用 :nth-child(odd) 和 :nth-child(even) 最直接
不需要 JavaScript，纯 CSS 就能实现 ul 列表项的隔行变色。关键不是给 ul 加样式，而是选中它的子元素 li。
常见错误是写成 ul:nth-child(odd) —— 这实际在匹配 ul 在父容器里的位置，不是列表项本身。正确写法是：
ul li:nth-child(odd) { background-color: #f5f5f5; }
ul li:nth-child(even) { background-color: #ffffff; }
- 必须写成
li:nth-child()，不是ul:nth-child() -
odd和even是关键字，不能写成1n+1或2n（虽然等价，但可读性差、易出错） - 如果
ul里混有其他元素（比如注释、空格文本节点），:nth-child可能失效——这时改用:nth-of-type
当 ul 里有非 li 子元素时，用 :nth-of-type 更稳
HTML 中看似干净的 ul，实际解析时可能包含换行符生成的文本节点，导致 :nth-child(2) 匹配不到第二个 li。这时候 :nth-of-type 只数 li 标签本身，不受干扰。
ul li:nth-of-type(odd) { background-color: #f0f8ff; }
ul li:nth-of-type(even) { background-color: #e6f7ff; }
-
:nth-of-type按同类型兄弟元素排序，更符合“第几个 li”的直觉 - 兼容性没问题：IE9+ 都支持，和
:nth-child一致 - 注意它不认 class 或属性，只看标签名 —— 所以
li.active和普通li在计数时算作同一类
避免影响嵌套列表的样式污染
如果 ul 里还有子 ul（比如多级菜单），上面的规则会把所有后代 li 都染上色。这不是想要的效果。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
解决方案是限定层级，用子选择器 >：
ul > li:nth-of-type(odd) { background-color: #f9f9f9; }
ul > li:nth-of-type(even) { background-color: #ffffff; }
-
ul li匹配任意深度的 li，ul > li只匹配直接子元素 - 如果需要给多级列表各自做交替色，就得为每层 ul 单独写规则，比如
ul ul > li - 别依赖 class 做区分（如
.main-list li），语义弱且维护成本高
需要兼容 IE8？只能用 class 模拟
IE8 不支持 :nth-child 和 :nth-of-type。如果必须支持，就得靠 JS 或服务端加 class，比如 class="odd" / class="even"。
最轻量的做法是在模板里循环时判断索引：
- CSS 写成
li.odd/li.even，简单可靠 - 千万别用 JS 动态遍历加 class —— 页面渲染后才执行，可能闪一下白底
- 现代项目基本不用考虑 IE8，但如果接手老系统，得确认构建流程是否自动注入 polyfill（实际极少生效）
ul > li:nth-of-type(odd) 覆盖 95% 场景；真正容易被忽略的是嵌套列表的层级控制和空白文本节点对 :nth-child 的干扰。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
