匹配 class 的 javascript 选择器，排除其他选择器

Question

我正在尝试为 querySelector 编写一个选择器，它将包括 class "foo" 但不包括 "foo bar" 的 div。我没有在这个项目中使用 jQuery。

<div class="foo">include me</div>
<div class="foo">and me</div>
<div class="foo bar">not me</div>

我试过 :not() 但不确定语法是否正确，因为这对我不起作用

document.querySelectorAll('div.foo|*:not(.bar)');

有人可以帮忙吗？

Answer 1

应该是

document.querySelectorAll('div.foo:not(.bar)');

这将 select 所有具有 class .foo 的 div 元素，而不是 .foo 和 .bar

Demo（检查控制台输出）

Answer 2

怎么样

document.querySelectorAll('div.foo:not(.bar)');