nth-child(n)常选不到元素是因为它按父元素所有子元素的位置序号计算，不区分标签类型；例如li:nth-child(2)失效可能因前有h3或注释节点，此时应改用nth-of-type(n)或JS筛选。
nth-child(n) 为什么经常选不到想要的元素
因为 常见错误现象： 当你只想找“第 n 个 注意：IE8 不支持 光靠位置不够？比如要找「带 性能提示：频繁用 别猜，直接在控制台跑一行代码： 如果返回 来数匹配数量。 真正麻烦的不是语法记不住，而是页面结构随时在变——定位逻辑一旦耦合了 DOM 序号，就等于把脆弱性写进了选择器里。nth-child(n) 是按父元素下所有子元素的**位置序号**计算的，不区分标签类型。比如父容器里有 、 混排，第 3 个子元素是 ，那 p:nth-child(3) 才会命中；如果第 3 个其实是 li:nth-child(2) 写了却没生效，实际是因为前一个 前面插了个 或注释节点（HTML 注释也算子节点）。
childElementCount 和实际序号nth-of-type(n)（只计同类型标签）或 JS 配合 querySelectorAll
nth-of-type(n) 更适合按标签类型定位
”，不管它前面有没有 li:nth-of-type(2)。它只统计同名标签的出现顺序。
nth-of-type，但现代项目基本不用考虑。另外，伪类对动态插入的元素实时生效，无需重新绑定。
button:nth-of-type(1) 选的是父容器中第一个 ，哪怕它是第 5 个子元素nth-child 一样，参数支持公式如 2n+1（奇数位）、-n+3（前 3 个）.item:nth-of-type(2) 是无效语法——伪类必须紧跟标签名或通配符结合属性选择器精准过滤特定内容
data-status="active" 的第 2 个 」，CSS 本身不支持「先过滤再编号」，得拆解处理：
li[data-status="active"]:nth-of-type(2) —— 注意这不是“第 2 个符合条件的”，而是“第 2 个 ，且恰好有该属性”。适用条件较窄document.querySelectorAll('li[data-status="active"]') 得到 NodeList，再取 [1]（索引从 0 开始）js-target-2nd-active，用 CSS 直接写 li.js-target-2nd-active
querySelectorAll + 索引在长列表中开销不小，建议缓存结果或用事件委托替代直接定位。调试时快速验证选择器是否匹配
getComputedStyle(document.querySelector('li:nth-of-type(3)'))
null，说明没匹配到；否则能立刻看到计算后的样式，顺带确认元素存在。也可以用：$$('li:nth-of-type(3)').length
$（可能被 jQuery 占用），统一用 $$（Chrome/Firefox 控制台原生支持）ul li:nth-child(2) 和 ul>li:nth-child(2) 含义不同（后代 vs 子元素）
