为什么
:not()选择器在jQuery中起作用但在CSS中失败？自从jQuery声称自己是“符合CSS3的”以来，它在两个地方都不能完全一样工作吗？还是我缺少某些东西？
也许 应该 ，但是事实 并非如此 ：jQuery扩展了
:not()选择器，以便[您可以将 _任何选择器_传递给它，无论它有多复杂，_我都怀疑_主要原因是与[
.not()方法，该方法还可以使用任意复杂的选择器并进行相应的过滤。它确实保持了类似CSS的语法，但是它是从标准中定义的内容扩展而来的。
另一个例子，这很好用（我知道与问题给出的例子相比，这是一个非常荒谬的例子，但这只是出于说明目的）：
$('section:not(body > [class], body > :has([class]))')请记住，将以逗号分隔的选择器列表传递给
:not()意味着过滤 与所有列出的选择器都不匹配的 元素。
另一方面，现在
:not()选择器级别3中的伪类受其自身的限制。您只能将
一个简单的选择器 作为参数传递给
:not()。这意味着您一次只能通过以下任何一项：
- 通用选择器（
*
），可以选择使用名称空间 - 型选择器（
a
，div
，span
，ul
，li
，等），任选地与一个命名空间 - 属性选择器（
[att]
，[att=val]
等），可以选择使用名称空间 - 类选择器（
.class
） - ID选择器（
#id
） - 伪类（
:pseudo-class
）
因此，这是jQuery的
:not()选择器和当前标准的
:not()选择器之间的区别：
- 首先，要直接回答这个问题： 您不能传递以逗号分隔的选择器列表。 1例如，如小提琴所示，虽然给定的选择器可在jQuery中使用，但它不是有效的CSS：
sectors > div:not(.alpha, .beta, .gamma)
是否有一个纯CSS解决方法，还是我必须依靠脚本？
幸运的是，在这种情况下，它已经存在。您只需要将多个
:not()选择器一个接一个地链接，以使其成为有效的CSS：
#sectors > div:not(.alpha):not(.beta):not(.gamma)
它不会使选择 的是 更长的时间，但矛盾和不便依然明显。
- 您不能将简单的选择器组合到复合选择器中以与一起使用
:not()
。这在jQuery中有效，但无效的CSS：foo > div:not(.foo.bar.baz)
您需要将其拆分为多个取反（不仅仅是链接它们！）以使其有效成为CSS：
#foo > div:not(.foo), #foo > div:not(.bar), #foo > div:not(.baz)
如您所见，这比第1点更为不便。
- 您不能使用组合器。 这适用于jQuery，但不适用于CSS：
/*
- Grab everything that is neither #foo itself nor within #foo.
- Notice the descendant combinator (the space) between #foo and .
/
:not(#foo, #foo *)
这是一个特别令人讨厌的情况，主要是因为它没有适当的解决方法。有一些 _宽松的_解决方法1和2，但是它们几乎总是取决于HTML结构，因此实用性非常有限。
- 在实现
querySelectorAll()
和:not()
选择器的浏览器中，以:not()
使其成为有效CSS选择器的方式在选择器字符串中使用将导致方法直接返回结果，而不是退回到Sizzle（实现:not()
扩展的jQuery选择器引擎）。如果您是表现的坚持者，那么这肯定是一笔微不足道的奖金，您一定会垂涎三尺。
好消息是选择器4增强了
:not()选择器，以允许使用逗号分隔复杂选择器列表。复杂选择器仅仅是一个简单的简单选择器或复合选择器，或者是由组合器分隔开的整个复合选择器链。简而言之，您在上方看到的所有内容。
这意味着上面的jQuery示例将成为有效的4级选择器，这将使伪类在未来几年内CSS实现开始支持伪类时变得更加有用。
1 尽管本文说您可以
:not()在Firefox3中将以逗号分隔的选择器列表传递到，但您不应该能够这样做。如果该文章声称该版本可在Firefox3中运行，那是因为Firefox3中的一个错误我无法再找到该错误的票证，但直到将来的浏览器实现将来的标准时，它才起作用。看到该文章迄今被引用的频率，我已经对此效果发表了评论，但是还看到了该文章的年代以及该网站的更新频率如何，我真的没有指望作者再来修复它。
