nth-child与类型选择器使用技巧

• 方案一（推荐）：用 li[data-status="active"]:nth-of-type(2) —— 注意这不是“第 2 个符合条件的”，而是“第 2 个
• ，且恰好有该属性”。适用条件较窄
• 方案二（可靠）：JS 中用 document.querySelectorAll('li[data-status="active"]') 得到 NodeList，再取 [1]（索引从 0 开始）
• 方案三（语义清晰）：给目标元素加临时 class，如 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 子元素）
• 移动端调试时，DOM 可能被框架动态重写，刷新后结构变化很常见，别依赖截图里的节点序号

真正麻烦的不是语法记不住，而是页面结构随时在变——定位逻辑一旦耦合了 DOM 序号，就等于把脆弱性写进了选择器里。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~