javascript - "not descendent"或 "find outermost"的 CSS3 选择器？

Question

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

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

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

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

我知道这种事情通常的 CSS 级解决方案是定义两个规则(foo 和 foo foo)，以便可以处理嵌套元素不同的。但这在这种情况下不起作用(因为这只是一个选择)。 (它在实际 CSS 中也让我感到不整洁，因为嵌套元素仍然会应用第一条规则，这使得无法对第一条规则覆盖的内容使用浏览器或父默认值。)

如果有帮助，至少在一个 foo 位于另一个 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");
})