IE8及以下不支持:nth-child()和:nth-of-type()，须用JS（如jQuery加class）或毗邻选择器+模拟；需先检测document.documentMode===8再执行，避免现代浏览器冗余遍历；DOM结构含非li节点时伪类易失效，动态渲染场景应避免依赖:nth-child。
IE8 及以下版本原生不支持 :nth-child()，任何纯 CSS 写法都无效；必须用 JS（如 jQuery）注入样式，或改用 IE 兼容的 CSS 替代写法。
判断是否为 IE8 并执行 jQuery 选择器
不能直接在全局 JS 中无条件运行 $('li:nth-child(2n)')，否则在现代浏览器里会多一次无意义 DOM 遍历。应先检测环境：
- 用
navigator.userAgent.match(/MSIE 8.0/)或更稳妥的document.documentMode === 8判断 - 只在 IE8 下启用 jQuery 逻辑，其他浏览器走原生 CSS
- 避免把 jQuery 选择器写成
$('ul li:nth-child(3n+1)')后再逐个.css()——性能差，推荐一次性加 class
示例：
if (document.documentMode === 8) {
$('ul li:nth-child(odd)').addClass('row-odd');
$('ul li:nth-child(even)').addClass('row-even');
}
再配 CSS：.row-odd { background: #eee; } —— 这样比反复调用 .css() 更轻量、更易维护。
为什么不用 :nth-of-type() 代替？
:nth-of-type() 在 IE8 同样不被支持，它和 :nth-child() 都是 CSS3 特性，IE8 的 CSS 解析器压根不认识这两个伪类。
- 试图写
li:nth-of-type(2)在 IE8 下完全静默，既不报错也不生效 - 不要寄希望于“换一个伪类就能绕过”，它们属于同一套未实现的标准
- 若结构中混有非
li元素（如注释、div），:nth-child()和:nth-of-type()行为本就不同，强行替换还可能引入新错位
纯 CSS 替代方案：毗邻选择器 + 的适用边界
当 jQuery 不可用（如禁用 JS）、或只需匹配极少数固定位置时，可用 + 模拟 :nth-child(n)：
-
li:first-child→ 第 1 个 -
li:first-child + li→ 第 2 个 -
li:first-child + li + li→ 第 3 个 -
li:nth-child(3n)无法用+简洁表达，此时必须用 JS
注意：li + li + li 会匹配所有从第 3 个开始的 li（即第 3、4、5…个），不是仅第 3 个；要精确控制，必须用 :first-child 开头链式书写。
容易被忽略的 DOM 结构陷阱
jQuery 的 $('li:nth-child(2n)') 虽然能跑，但它仍遵循原生 :nth-child 的计数逻辑：按父元素下所有子节点物理顺序算，不是只看 li。
- 如果
ul里夹着注释节点、文本节点或div，li:nth-child(2)可能根本选不到第二个li - 此时 jQuery 也无能为力，得先清理 HTML 结构，或改用
$('li').filter(function(i){ return i % 2 === 1; })手动索引 - 动态渲染（如 Vue 的
v-if）会导致 DOM 实时变化，:nth-child计数持续漂移——这种场景下，硬靠 CSS 伪类本身就是反模式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
