根据文档，“选择器是在元素所在的整个 DOM 树的上下文中针对给定元素进行评估的。”
也就是说，它不是 jQuery 风格的“查找与从此处开始的选择器路径匹配的元素”。根据规范，从 DOM 树级别查看时，
#parent #foo
绝对匹配
div div和
div > div。当您将
#parent
更改为
span时，它会“起作用”，因为
#parent #foo不再匹配
div div，而
#foo #bar是新的第一个匹配项。
<!DOCTYPE html>
<html>
<body>
<div id="parent">
<div id="foo">
<div id="bar"> <p> sample para </p> </div>
</div>
</div>
<script>
//const div = document.querySelector("div div div").innerHTML;
var parent = document.getElementById('parent');
const div = parent.querySelector('div div').innerHTML;
document.write(div);
//sample para
const div = parent.querySelector('div div').innerHTML;
document.write(div);
//sample para
</script>
</body>
</html>