jquery - 为什么我的 jQuery :not() selector not working in CSS?

Question

我有这个布局:

<div id="sectors">
    <h1>Sectors</h1>
    <div id="s7-1103" class="alpha"></div>
    <div id="s8-1104" class="alpha"></div>
    <div id="s1-7605" class="beta"></div>
    <div id="s0-7479"></div>
    <div id="s2-6528" class="gamma"></div>
    <div id="s0-4444"></div>
</div>

使用这些 CSS 规则:

#sectors {
    width: 584px;
    background-color: #ffd;
    margin: 1.5em;
    border: 4px dashed #000;
    padding: 16px;
    overflow: auto;
}

#sectors > h1 {
    font-size: 2em;
    font-weight: bold;
    text-align: center;
}

#sectors > div {
    float: left;
    position: relative;
    width: 180px;
    height: 240px;
    margin: 16px 0 0 16px;
    border-style: solid;
    border-width: 2px;
}

#sectors > div::after {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    font-weight: bold;
    text-align: center;
    text-transform: capitalize;
    background-color: rgba(255, 255, 255, 0.8);
    border-top: 2px solid;
    content: attr(id) ' - ' attr(class);
}

#sectors > div:nth-of-type(3n+1) {
    margin-left: 0;
}

#sectors > div.alpha { color: #b00; background-color: #ffe0d9; }
#sectors > div.beta  { color: #05b; background-color: #c0edff; }
#sectors > div.gamma { color: #362; background-color: #d4f6c3; }

我使用 jQuery 添加 unassigned类到没有其他类之一的扇区 alpha , beta或 gamma :

$('#sectors > div:not(.alpha, .beta, .gamma)').addClass('unassigned');

然后我对该类应用一些不同的规则:

#sectors > div.unassigned {
    color: #808080;
    background-color: #e9e9e9;
    opacity: 0.5;
}

#sectors > div.unassigned::after {
    content: attr(id) ' - Unassigned';
}

#sectors > div.unassigned:hover {
    opacity: 1.0;
}

一切都在现代浏览器中完美运行。

Interactive jsFiddle preview

但作为 :not() selector in jQuery基于 :not() in CSS3 ，我想我可以将它直接移动到我的样式表中，这样我就不必依赖于使用 jQuery 添加额外的类。此外，我对支持旧版本的 IE 并不是很感兴趣，其他浏览器对 :not() 的支持也很好。选择器。

所以我尝试改变 .unassigned上面的部分(知道我的布局中只会有扇区 Α、Β 和 Γ):

#sectors > div:not(.alpha, .beta, .gamma) {
    color: #808080;
    background-color: #e9e9e9;
    opacity: 0.5;
}

#sectors > div:not(.alpha, .beta, .gamma)::after {
    content: attr(id) ' - Unassigned';
}

#sectors > div:not(.alpha, .beta, .gamma):hover {
    opacity: 1.0;
}

但是一旦我这样做，它就会停止工作——在所有浏览器中!我的未分配扇区不再变灰、淡出或标记为“未分配”。

Updated but not so interactive jsFiddle preview

为什么 :not()选择器在 jQuery 中工作但在 CSS 中失败？它不应该在两个地方都一样工作，因为 jQuery 声称是“CSS3 兼容的”，还是我遗漏了什么？

是否有针对此的纯 CSS 解决方法，还是我必须依赖脚本？

Answer 1

Why does the :not() selector work in jQuery but fail in CSS? Shouldn't it work identically in both places since jQuery claims to be "CSS3 Compliant", or is there something I'm missing?

也许应该，但事实证明它没有:jQuery 扩展了 :not()选择器使得 you can pass any selector to it ，无论它有多复杂，我怀疑其主要原因是与 .not() method 相同。 ，它也接受任意复杂的选择器并相应地过滤。它确实在某种程度上维护了类似 CSS 的语法，但它扩展了标准中定义的内容。

再举一个例子，这很好用(我知道与问题中给出的内容相比，这是一个非常荒谬的例子，但这只是为了说明目的):

/* 
 * Select any section
 * that's neither a child of body with a class
 * nor a child of body having a descendant with a class.
 */
$('section:not(body > [class], body > :has([class]))')

jsFiddle preview

请记住，将逗号分隔的选择器列表传递给 :not()表示过滤与任何列出的选择器都不匹配的元素。

现在 :not() pseudo-class in Selectors level 3另一方面，它本身非常有限。您只能将一个简单的选择器作为参数传递给 :not() .这意味着您一次只能通过以下任何一项:

通用选择器 ( * )，可选带有 namespace

类型选择器( a 、 div 、 span 、 ul 、 li 等)，可选择使用 namespace

属性选择器( [att] 、 [att=val] 等)，可选带有 namespace

类选择器 ( .class )

ID 选择器 ( #id )

伪类 ( :pseudo-class )

所以，这里是 jQuery's :not() selector 之间的区别和 the current standard's :not() selector :

首先，直接回答问题:您不能传递逗号分隔的选择器列表。 1 例如，虽然给定的选择器如 fiddle 所示在 jQuery 中工作，但它不是有效的 CSS:

/* If it's not in the Α, Β or Γ sectors, it's unassigned */
#sectors > div:not(.alpha, .beta, .gamma)

Is there a pure CSS workaround for this or will I have to rely on a script?

值得庆幸的是，在这种情况下，有。您只需链接多个 :not()一个接一个的选择器，以使其成为有效的 CSS:

#sectors > div:not(.alpha):not(.beta):not(.gamma)

它不会使选择器变得更长，但不一致和不便仍然很明显。

Updated interactive jsFiddle preview

您不能将简单选择器组合成复合选择器以用于 :not() . 这适用于 jQuery，但无效的 CSS:

/* Do not find divs that have all three classes together */
#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 选择器引擎)。如果您是性能的忠实拥护者，那么您肯定会垂涎三尺。

好消息是 Selectors 4 enhances the :not() selector允许以逗号分隔的复杂选择器列表。复杂选择器只是一个单独的简单或复合选择器，或者是由组合子分隔的整个复合选择器链。简而言之，你在上面看到的一切。

这意味着上面的 jQuery 示例将成为有效的 4 级选择器，这将使伪类在 future 几年 CSS 实现开始支持它时变得更加有用。

1 虽然 this article说你可以将逗号分隔的选择器列表传递给 :not()在 Firefox 3 中，你不应该能够。如果它像那篇文章所说的那样在 Firefox 3 中工作，那么这是因为 Firefox 3 中的一个错误，我再也找不到它的票证了，但是在 future 的浏览器实现 future 的标准之前，它不应该工作。看到迄今为止该文章被引用的频率，我留下了 comment为了达到这个效果，但也看到文章有多老以及网站更新的频率有多低，我真的不指望作者回来修复它。