使用querySelector与:nth-child选择器获取元素时遇到的问题

嘿，我来帮你捋捋问题出在哪～

你当前用的选择器#plans-tab .row .small-12.columns:nth-child(2)之所以返回null，核心问题出在:nth-child(2)的作用对象上：这个伪类是用来找父元素下的第二个子元素，而且这个子元素必须同时匹配.small-12.columns的类。但从你提供的HTML结构来看，每个.row容器里只有一个.small-12.columns元素——也就是说，每个.columns都是它父级.row的第一个子元素，自然找不到第二个符合条件的子元素啦。

给你两个靠谱的解决方案：

方案1：批量获取后按索引选取 #

先用querySelectorAll拿到所有符合条件的元素，再通过索引访问你需要的那一个（注意索引从0开始）：

// 获取#plans-tab下所有目标元素
const allPlanElements = document.querySelectorAll('#plans-tab .row .small-12.columns');
// 取第二个元素（对应索引1）
const secondPlan = allPlanElements[1];

方案2：调整选择器层级 #

把:nth-child（或:nth-of-type）用在.row层级，先定位到第N个.row，再找里面的.columns：

// 找#plans-tab下第二个.row里的.columns
document.querySelector('#plans-tab .row:nth-child(2) .small-12.columns');

如果#plans-tab下除了.row还有其他类型的子元素，建议用:nth-of-type来精准匹配.row类型的第二个元素：

document.querySelector('#plans-tab .row:nth-of-type(2) .small-12.columns');

这样就能顺利拿到你想要的元素啦～

内容的提问来源于stack exchange，提问作者Joao Victor