ie8及更早版本完全不支持:nth-child()及其所有衍生写法（如odd、even、3n+1等），整条css规则会被直接忽略；唯一可用的是:first-child（ie7+支持），可用相邻选择器+模拟，或通过ua检测后用jquery兜底。
IE8 及更早版本压根不识别 :nth-child() 语法，整条 CSS 规则会被直接跳过——不是样式没生效，而是浏览器根本“看不见”它。别指望加个 @supports 就能兜底，IE11 都不认这个语法，IE8 更不可能。
IE8 不支持哪些 nth-child 衍生写法
所有带公式、关键词或负号的 :nth-child() 形式，在 IE8 中一律无效：
-
:nth-child(odd)、:nth-child(even)→ 不支持 -
:nth-child(3n+1)、:nth-child(-n+3)→ 不支持 -
:nth-child(n)（哪怕只是字母 n）→ 不支持 -
:nth-of-type()、:nth-last-child()、:nth-last-of-type()→ 全都不支持
唯一能用的只有基础位置伪类：:first-child（IE7+ 支持）、:last-child（IE9+ 才支持，IE8 也不行）。
用 + 相邻选择器手动模拟 nth-child(n)
这是纯 CSS 方案里最可靠的做法，前提是目标元素是连续同级子元素（比如 li 或 p），且你只处理前几项（如第 1–5 个）。
- 选第 1 个：
li:first-child - 选第 2 个：
li:first-child + li - 选第 3 个：
li:first-child + li + li - 选第 4 个：
li:first-child + li + li + li
注意：IE8 支持 E+F，但不支持 E~F（通用兄弟），所以必须用 + 串连，不能偷懒写成 li:first-child ~ li:nth-of-type(3)——后者在 IE8 里整条规则失效。
用 jQuery 选择器兜底，但得先判断 IE8
如果必须动态匹配复杂公式（比如 :nth-child(3n+2)），就得上 JS。关键是不能无差别执行，否则现代浏览器也会多跑一遍 jQuery 查询。
- 用
navigator.userAgent检测 IE8：if (navigator.userAgent.indexOf('MSIE 8.0') > -1) - 避免用
document.all或!window.atob等模糊检测，容易误判 - jQuery 的
$('li:nth-child(3n+2)')在 IE8 下可正常工作，但要注意它只作用于已存在的 DOM 节点，动态插入的新节点需手动 re-run
示例片段：
if (navigator.userAgent.indexOf('MSIE 8.0') > -1) {
$('li:nth-child(odd)').addClass('is-odd');
}
SCSS 编译时必须人工过滤 :nth-child
如果你用 SCSS 写了 &:nth-child(2n)，编译后生成的 CSS 会原样保留该字符串。IE8 看到就跳过整条规则，连后面的声明（比如 color: red）都不会解析。
- 构建流程中加一道 grep 检查：
grep -r ':nth-child' src/css/ - 禁止在 BEM 修饰符里嵌套：
&.card--expanded:nth-child(2)→ 编译出.card.card--expanded:nth-child(2)，IE8 直接忽略 - 团队约定：所有
:nth-child必须出现在独立规则块中，并附带 IE8 回退注释
真正难缠的不是“怎么写”，而是“怎么确保没人漏掉”。哪怕只有一处 :nth-child(3n) 残留在生产 CSS 里，IE8 用户看到的就是整块样式消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
