一个在类上匹配的javascript选择器，不包括其他选择器

Question

我正在尝试为querySelector编写一个选择器，它将包含class＆＃34; foo＆＃34;的div。但不是＆＃34; foo bar＆＃34;。我在这个项目中没有使用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)');

这将选择div class的所有.foo元素，而.foo

选择.bar

Demo（检查控制台输出）

Answer 2

怎么样

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