javascript - 为什么嵌套元素是由last-of-type选择的？

Question

我有一个非常简单的 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')返回<div>a1</div> ，不是<div>d</div> .

我以为document.body.querySelector('div > div:last-of-type')应该与 document.body.querySelector('div > div:nth-of-type(3)') 相同，返回 <div>d</div> .

总结一下我的问题:

1. 为什么 document.body.querySelector('div > div:last-of-type')返回<div>a1</div> ，不是<div>d</div> ？这是一个错误吗？

2. 选择<div>d</div>的正确方法是什么？ ？

Answer 1

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

您当前的代码正在从任何其他 div 的最后一个 div 子级的 div 中进行选择，您没有指定要专门查看容器 div 的子级