Javascript 为什么按最后一种类型选择嵌套元素？

我有一个非常简单的HTML结构，如下所示：

<div>
    <div>a<div>a1</div></div>
    <div>b</div>
    <p>c</p>
    <div>d</div>
</div>

和document.body.querySelector'div>div:last of type'返回a1，而不是d

我认为document.body.querySelector'div>div:last of type'应该与document.body.querySelector'div>div:nth-of-type3'相同，后者返回d

总结一下我的问题：

为什么document.body.querySelector'div>div:last of type'返回a1，而不是d？是虫子吗

选择d的正确方法是什么

---

如果要从初始容器div的div子级中进行选择，请为该div指定一个类或ID，例如.container，然后将其选择为document.body.querySelector'div.container>div:last of type'

---

当前代码正在从任何其他div的最后一个子div中进行选择，如果要从初始容器div的子div中进行选择，则没有指定要专门查看容器div的子div，给div一个类或ID，比如.container，然后将其选择为document.body.querySelector'div.container>div:last of type'

当前代码正在从任何其他div的最后一个子div中进行选择，您没有指定要根据documentquerySelector以独占方式查看容器div的子div

文档、DocumentFragment和 元素接口必须返回内的第一个匹配元素节点 上下文对象的子树

第一个匹配元素是什么

我们可以将DocumentUserySelectorAll与相同的选择器一起使用，如您所见，数组中的第一个结果是a1

const result=Array.fromdocument.body.queryselectoral'div>div:type的最后一个'； console.logresult； aa1 B c

D 根据文档QuerySelector

文档、DocumentFragment和 元素接口必须返回内的第一个匹配元素节点 上下文对象的子树

第一个匹配元素是什么

我们可以将DocumentUserySelectorAll与相同的选择器一起使用，如您所见，数组中的第一个结果是a1

const result=Array.fromdocument.body.queryselectoral'div>div:type的最后一个'； console.logresult； aa1 B c

D

---

所以这是获得最后一个孩子的标准方法

console.logdocument.body.querySelector'div.lastElementChild aa1 B c

D

---

所以这是获得最后一个孩子的标准方法

console.logdocument.body.querySelector'div.lastElementChild aa1 B c

D 为什么document.body.querySelector'div>div:last of type'返回a1，而不是d？是虫子吗

不，这不是虫子。原因有两方面：

如果选择器匹配多个元素，则querySelector仅返回第一个匹配元素。 选择器的作用域不限于调用其querySelector方法的元素。 因为a1是第一个匹配div>div:last类型的元素，所以这就是代码返回的内容

选择d的正确方法是什么

没有必要把事情复杂化

为什么document.body.querySelector'div>div:last of type'返回a1，而不是d？是虫子吗

不，这不是虫子。原因有两方面：

如果选择器匹配多个元素，则querySelector仅返回第一个匹配元素。 选择器的作用域不限于调用其querySelector方法的元素。 因为a1是第一个匹配div>div:last类型的元素，所以这就是代码返回的内容

选择d的正确方法是什么

没有必要把事情复杂化

document.querySelector('body > div > div:last-of-type')