ie8及更早版本不支持:nth-child、:nth-of-type、:last-child、:first-of-type、:last-of-type、:not()、:empty、[type="submit"]、h1+p、h1~ul等选择器；仅:first-child在ie7+可用，其余均需ie9+。
IE8 及更早版本不支持 :nth-of-type 和 :nth-child
这两个选择器在 IE8 及以下完全无效，连语法解析都会被忽略。哪怕你写了 p:nth-child(2)，IE8 也当它不存在——不会报错，也不会应用样式。如果你的项目仍需兼容 IE8（比如某些政务或金融内网系统），必须绕开它们，改用类名或 JS 动态加 class。
:first-child 是唯一能在 IE7 中工作的同类选择器
只有 :first-child 被 IE7 支持，:last-child、:nth-child、:nth-of-type、:first-of-type、:last-of-type 全部从 IE9 开始才可用。这意味着：
- 若想让第一个
li变色且兼容 IE7，用li:first-child是安全的 - 但想选“倒数第二个
div”，就不能用div:nth-last-child(2)，得靠 JS 或预设 class - 移动端基本无此顾虑（iOS Safari / Chrome Android 从很早起就全支持）
:nth-of-type 和 :nth-child 在 IE9+ 行为一致，但逻辑完全不同
IE9+、现代浏览器都支持二者，但它们的匹配机制差异极大，容易写错却看不出问题：
-
div:nth-child(3)：父元素下第 3 个子节点，且该节点必须是div；如果第 3 个是p，就不匹配 -
div:nth-of-type(3)：父元素下所有div中的第 3 个，不管中间夹了多少span或p - 常见误用：
li:nth-child(odd)在混合结构中可能漏选，而li:nth-of-type(odd)更稳定（只要li是同级） - 公式如
2n+1、even、odd写法相同，但结果常因 DOM 结构不同而偏差
Chrome/Firefox/Safari 最新版本支持 :nth-child(n of selector)
这是 CSS Selectors Level 4 新增语法，用于精准限定计数范围，例如：
li:nth-child(2 of .active) { color: red; }
意思是“在所有带 .active 类的 li 中，选第 2 个”。但它目前仅被 Chrome 120+、Firefox 115+、Safari 17.4+ 支持，IE/Edge Legacy 完全不认。实际项目中若要用，务必检查目标环境是否覆盖——尤其注意安卓 WebView 的 Chromium 版本可能滞后数年。
真正容易被忽略的不是兼容性表格里的数字，而是 DOM 结构微小变化会让 :nth-child 突然失效，而 :nth-of-type 更“抗干扰”，但前提是类型标签确实一致（比如不能混用 div 和自定义组件标签）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
