li:nth-child(2)选不到第二个li，是因为它要求ul的第二个子节点必须是li，而html换行、注释或其它标签会干扰真实序号，导致目标li实际位置偏移。
为什么 li:nth-child(2) 在 ul 里有时选不到第二个 li
因为浏览器数的是父元素下所有子节点的物理顺序，不是你肉眼看到的“第几个 li”。ul 里哪怕只多一个换行、一段注释或一个 <div class="ad">，就会让原本第 2 个的 <code>li 变成第 3、第 4 甚至更靠后的位置。
常见干扰源：
- HTML 换行和缩进产生的
#text节点（开发者工具里显示为 “\n” 或空格） -
<!-- 注释 -->节点，哪怕它在代码里被你折叠了 - Vue/React 渲染插入的
<!--v-if-->或包裹用的<div> <li>富文本编辑器输出的非语义标签（如 <code><span></span>、<br>
） - 写
li:nth-child(2) span控制第二个li里的所有span - 写
li:nth-child(2) span:first-child控制第二个li里第一个span - 避免直接对深层子元素用
:nth-child，它只认直接父级 - 用
document.documentMode === 8精准检测，只在 IE8 下执行 jQuery 补充逻辑，比如$('ul li').filter(function(i){ return i % 2 === 1; }).addClass('even'); - 纯 CSS 方案只能用毗邻选择器链，例如
li:first-child + li（第 2 个）、li:first-child + li + li（第 3 个），但无法表达3n+1这类复杂公式 - 服务端或构建时就给关键项加语义化 class，比如
class="first-in-section"、class="featured-item" - 用 JS 动态打标：遍历后统一加
data-index="1"、data-index="2"，再写[data-index="3"] - 在 Sass/Less 中封装 mixin，把
nth-child逻辑转成 class 列表生成，避免硬编码魔数
验证方法：右键目标 li → “Reveal in Elements panel”，看它在 ul 下的真实子节点序号——注意 #text 和 comment 都算数。
span:nth-child(1) 为什么总是命中第一个 span，但不是你想要的那个
这是典型误用：span:nth-child(1) 的意思是“父元素的第一个子节点必须是 span”，而不是“所有 span 中的第一个”。如果父元素是 li，而 li 里结构是 <a><span>文字</span></a><span>图标</span>，那么 span:nth-child(1) 根本不会匹配任何东西——因为第一个子节点是 <a></a>，不是 <span></span>。
真正想控制的是嵌套内的第 n 个 span？得往上提一级：
IE8 下 :nth-child() 完全不生效，连降级方案都踩坑
IE8 原生不支持 :nth-child() 和 :nth-of-type()，两者都是 CSS3 特性，解析器直接忽略。别指望换伪类就能绕过去。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
安全做法只有两条路：
注意：$('li:nth-child(2)') 在 jQuery 里能跑，但它依然按原生规则数节点——如果 DOM 里有注释，它照样选错。所以 JS 方案也得先清理结构，或改用索引过滤。
什么时候该果断放弃 :nth-child()，改用 class
当你的列表结构可能被 CMS、编辑器或 JS 动态修改时，:nth-child() 就成了定时炸弹。DOM 插入一个节点、隐藏一个项、甚至只是多了一行空格，样式就偏移。
更鲁棒的做法：
伪类本身没坏，但它依赖的 DOM 结构太脆弱——真实项目里，能用 class 控制的，就别赌浏览器怎么数节点。
