这段代码并没有选择所有不包含font元素的i元素，而是选择了i的所有不包含font元素的子元素。

console.log([...document.querySelectorAll('i>*:not(font)')])

<i>
  <font color="008000">Here goes some text</font>
</i>
<br />
<i>Here goes another text</i>

对于你想要的行为，你需要在CSS中使用新的:has()选择器available in all major browsers（除了在firefox中的一个标志后面）：
一个二个一个一个

document.querySelectorAll('i:not(:has(font))');

应该可以的

因为要将querySelectorAll()返回的NodeList扩展到[...]的数组中，所以我们可以使用数组标准方法从其中删除DOM节点：

const elements = [...document.querySelectorAll("i")]
  .filter((el) => !el.querySelector("font"));
  
console.log(elements);

<i><font color="008000">Here goes some text</font></i>
<br>
<i>Select me!</i>
<i>And <b>me too</b>!</i>
<i>However, <span><font>I am doubly nested, don't select me</font></span></i>