为何querySelector仅返回`main > *:nth-last-child(n+3)`的第一个匹配子元素？

你遇到的问题核心是选错了DOM查询方法：

• document.querySelector() 的特性就是只返回匹配选择器的第一个DOM元素，不管有多少个符合条件的元素，这就是你只拿到第一个<p>的原因。
• 如果你要获取所有符合 main > *:nth-last-child(n + 3) 规则的元素，必须使用 document.querySelectorAll()。

修正后的JS代码：

const targetElements = document.querySelectorAll('main > *:nth-last-child(n + 3)');
console.log(targetElements); // 会返回包含前3个<p>元素的NodeList集合

补充说明：

• querySelector()：仅返回匹配选择器的第一个元素，无匹配时返回null
• querySelectorAll()：返回所有匹配选择器的元素，以NodeList形式存在，无匹配时返回空NodeList

你的CSS选择器本身是正确的，所以样式能应用到所有目标元素，只是JS查询方法用错了。

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