“非后代”或“查找最外层”的 CSS3 选择器？

Question

我正在使用dojo.query，它在内部使用 CSS3 选择器来识别您要检索的元素。

我要查找的是所有带有标签“foo”的元素，但只有最外面的元素（即允许一个“foo”嵌入另一个“foo”中，我想忽略这些）。外部元素可以出现在文档的任何级别，嵌套在几乎任何其他元素中。

当然，dojo.query('foo') 返回所有 foo 元素，包括嵌套的元素（我不想要）。

我的下一次尝试是 dojo.query('foo:not(foo foo)')，但这不会返回任何结果（因为后代选择器不是“简单选择器”，因此 :not 不支持）。

我知道这类事情通常的 CSS 级解决方案是定义两个规则（foo 和 foo foo），以便可以区别对待嵌套元素。但这在这种情况下不起作用（因为这只是一个选择）。 （在真正的 CSS 中，我也觉得它不整洁，因为无论如何嵌套元素仍然会应用第一个规则，因此无法将浏览器或父级默认值用于第一个规则覆盖的内容。）

如果有帮助，至少在一个 foo 位于另一个内部时，它必须是直接子级，尽管它们最终可以嵌套到任意级别。 （即 'foo>foo' 也会成功匹配所有嵌套的 foo 元素，但不幸的是这仍然与我想要的相反。）

编辑：我目前使用的解决方法如下，尽管我仍然希望有一些更优雅的东西（并且更安全，以防可能存在间接嵌套):

dojo.query('foo').forEach(function(foo) {
    if (foo.parentNode.localName == 'foo') { return; }
    // ...
});

Answer 1

如果它总是直系后代，那么你可以这样做

dojo.query("foo").filter(function(item) {
    return (item.parentNode.nodeName.toLowerCase() !== "foo");
})