IE8及以下不支持:nth-child()，需用document.documentMode===8判断并用jQuery加class兼容；该伪类按所有子节点计数，含文本和注释节点；可用+链式选择器模拟固定位置，但无法表达公式逻辑。
IE8 及以下根本无法解析 :nth-child()，不是写法问题
IE8 的 CSS 解析器压根没实现这个特性，任何纯 CSS 写法都无效。别试 :nth-child(2)、:nth-child(odd) 或 :nth-child(3n+1)——它们在 IE8 里直接被忽略，整条规则失效。
判断是否为 IE8 必须用 document.documentMode === 8，比 navigator.userAgent 可靠，能避开 Edge 兼容模式或 UA 伪造干扰。
- 只在 IE8 下启用兼容逻辑，现代浏览器不执行 jQuery 选择器，避免无意义 DOM 遍历
- 匹配后统一加 class（如
.is-odd），而不是链式调用.css()——后者性能差、难维护、样式无法继承 - 示例：
if (document.documentMode === 8) {<br> $('ul li:nth-child(odd)').addClass('is-odd');<br> $('ul li:nth-child(even)').addClass('is-even');<br>}
:nth-child() 在所有浏览器里都按“真实子节点”计数
它数的是父元素下**所有子节点**：包括 <li>、文本节点（空格/换行）、HTML 注释 <!-- -->。哪怕你肉眼只看到 3 个 <li>，只要中间夹了注释，li:nth-child(3) 就可能选不到第三个 <li>。
- 用 DevTools 展开父元素，逐个看子节点类型和顺序，确认目标元素确实是第 n 个子节点
- 临时加
* { outline: 1px solid red; }直观显示每个节点边界 - 删注释、压缩 HTML 成单行，或改用
:nth-of-type()（但注意：IE8 同样不支持） - 动态渲染（Vue/React 条件渲染）会移除节点，导致序号偏移；
display: none不影响计数，但v-if或{cond && <div>}会改变真实子节点数量
用 + 链式选择器模拟固定位置，但有硬限制
li:first-child + li 这种写法 IE6+ 全兼容，但它只能精确匹配“第 N 个”，不能表达公式类逻辑（比如 3n+1）。而且必须以 :first-child 开头，否则 li + li + li 会匹配从第 3 个开始的所有 <li>，不是仅第 3 个。
立即学习“前端免费学习笔记（深入）”；
-
li:first-child→ 第 1 个 -
li:first-child + li→ 第 2 个 -
li:first-child + li + li→ 第 3 个 - 结构含非
<li>节点时，+链仍按实际 DOM 顺序计数，和:nth-child()行为一致，同样会错位
:nth-child(of <selector>) 目前基本不可用
这个语法目前仅 Safari 15.4+ 和 Chrome 111+ 原生支持，Firefox 完全没实现，旧版 Chrome/Edge 更不用提。它要求元素**同时满足两个条件**：匹配 <selector>，且是父元素的第 N 个子节点（位置必须吻合）。
- 错误写法：
button:nth-child(1 of .primary, .secondary)——of后不支持逗号分隔多个选择器 - 检测方式：
@supports (selector(:nth-child(1 of li))) { ... } - 别指望它响应 class 切换：DOM 结构不变，就不会重算匹配结果
- 真要稳定上线，放弃该语法，改用 JS 过滤或
:is(.active):nth-of-type(2)（注意：这仍是按标签类型计数，不是按匹配结果）
最麻烦的从来不是语法不会写，而是你以为 DOM 是干净的，结果它早被注释、空格、框架插入的 comment 节点悄悄改写了真实结构。清理 HTML 比硬套兼容方案更省事，也更可靠。
