Element.querySelector使用:last-child选择器查询元素出现意外结果问题

核心原因 #

这是querySelector的匹配逻辑导致的，具体规则如下：

1. 调用element.querySelector(selector)时，会先全局匹配所有符合selector规则的元素，再过滤出属于element后代节点的元素，返回第一个符合条件的结果
2. 你最初的选择器li:last-child > a会匹配两类符合条件的<a>元素：
   • 第一类就是你拿到的<a href="#foo">Stuff</a>：你持有的item本身是外层<ul>的唯一子元素，天然满足li:last-child的规则，它的直接子元素Stuff对应的<a>完全匹配li:last-child > a规则，同时它属于item的后代节点，所以会被优先返回
3. 你测试的item.querySelector('li:last-child')能返回嵌套<ul>最后一个<li>的原因也很简单：li:last-child虽然也匹配item本身，但querySelector只返回调用节点的后代元素，item本身不属于自己的后代，所以只会匹配到后代中符合规则的嵌套<li>

简化的正确写法 #

你可以用:scope伪类指定匹配范围从当前调用元素的子节点开始，避免匹配到和当前元素自身关联的结果：

let lastLink = item.querySelector(':scope li:last-child > a');

:scope代表调用querySelector的元素本身，上述写法会强制只匹配item后代中的<li>最后一个子元素下的直接<a>，完全符合你的预期。

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