为什么我的 jQuery :not() 选择器在 CSS 中不起作用? [英] Why is my jQuery :not() selector not working in CSS?
问题描述
我有这个布局:
<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>
With these CSS rules:
使用这些 CSS 规则:
I use jQuery to add the unassigned class to sectors that don't otherwise have one of the classes alpha, beta or gamma:
$('#sectors > div:not(.alpha, .beta, .gamma)').addClass('unassigned');
我使用 jQuery 将 unassigned 类添加到没有 alpha、beta 或 类之一的扇区>伽玛:
Then I apply some different rules to that class:
#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;
}
然后我对该类应用一些不同的规则:
And everything works flawlessly in modern browsers.
Interactive jsFiddle preview而且一切都在现代浏览器中完美运行.
But seeing as the :not() selector in jQuery is based on :not() in CSS3, I was thinking I could move it directly into my stylesheet so I wouldn't have to rely on adding an extra class using jQuery. Besides, I'm not really interested in supporting older versions of IE, and other browsers have excellent support for the :not() selector.
但在 jQuery 中视为 :not() 选择器基于 CSS3 中的 :not()，我想我可以将它直接移到我的样式表中，这样我就不必依赖于使用 jQuery 添加额外的类.此外，我对支持旧版本的 IE 并不是很感兴趣，其他浏览器对 :not() 选择器有很好的支持.
#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;
}
所以我尝试将上面的 .unassigned 部分更改为此(知道我的布局中将只有扇区 Α、Β 和 Γ):
But as soon as I do this it stops working — in all browsers! My unassigned sectors aren't grayed out, faded out or labeled 'Unassigned' anymore.
Updated but not so interactive jsFiddle preview但是一旦我这样做，它就会停止工作——在所有浏览器中！我的未分配扇区不再变灰、淡出或标记为未分配".
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?
为什么 :not() 选择器在 jQuery 中工作但在 CSS 中失败?因为 jQuery 声称符合 CSS3"，所以它不应该在两个地方完全相同，还是我遗漏了什么?
是否有纯 CSS 解决方法，或者我必须依赖脚本?
推荐答案
为什么
:not()选择器在 jQuery 中工作但在 CSS 中失败?因为 jQuery 声称符合 CSS3"，所以它不应该在两个地方完全相同，还是我遗漏了什么?
As another example, this works just fine (I know it's an incredibly ludicrous example compared to what's given in the question, but it's just for illustrative purposes):
也许它应该，但事实证明它没有:jQuery扩展了:not()选择器，使得.not() 方法，它也接受任意复杂的选择器和相应的过滤器.它确实在某种程度上维护了类似 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
Remember that passing a comma-separated list of selectors to :not() means filtering elements that don't match any of the listed selectors.请记住，将逗号分隔的选择器列表传递给 :not() 意味着过滤不匹配任何列出的选择器的元素.
- Universal selector (
*), optionally with a namespace - Type selector (
a,div,span,ul,li, etc), optionally with a namespace - Attribute selector (
[att],[att=val], etc), optionally with a namespace - Class selector (
.class) - ID selector (
#id) - Pseudo-class (
:pseudo-class)
现在 :not() 伪类在另一方面，选择器级别 3 本身非常有限.您只能将一个简单的选择器作为参数传递给:not().这意味着您一次只能通过其中任何一个:
So, here are the differences between jQuery's :not() selector and the current standard's :not() selector:
- 通用选择器 (
*)，可选择带有 命名空间 - 类型选择器(
a、div、span、ul、li等)，可选择使用 命名空间 - 属性选择器(
[att]、[att=val]等)，可选带有 命名空间 - 类选择器(
.class) - ID 选择器 (
#id) - 伪类(
:pseudo-class)
First and foremost, to answer the question directly: you can't pass a comma-separated selector list.1 For example, while the given selector works in jQuery as demonstrated in the fiddle, it isn't valid CSS:
那么，这里是 jQuery 的 :not() 选择器之间的区别 和 当前标准的 :not() 选择器:
/* If it's not in the Α, Β or Γ sectors, it's unassigned */
#sectors > div:not(.alpha, .beta, .gamma)
首先，直接回答问题:你不能传递逗号分隔的选择器列表.1例如，虽然给定的选择器如小提琴所示，在 jQuery 中工作，它不是有效的 CSS:
Is there a pure CSS workaround for this or will I have to rely on a script?
<块引用>
是否有纯 CSS 解决方法，或者我必须依赖脚本?
Thankfully, in this case, there is. You simply have to chain multiple :not() selectors, one after another, in order to make it valid CSS:
幸运的是，在这种情况下，有.你只需要一个接一个地链接多个 :not() 选择器，以使其成为有效的 CSS:
#sectors > div:not(.alpha):not(.beta):not(.gamma)
It doesn't make the selector that much longer, but the inconsistency and inconvenience remain evident.它不会使选择器那个更长，但不一致和不便仍然很明显.
Updated interactive jsFiddle preview
您不能将简单选择器组合成复合选择器以与 :not() 一起使用. 这在 jQuery 中有效，但在 CSS 中无效:>
You'll need to split it up into multiple negations (not just chain them!) to make it valid CSS:您需要将其拆分为多个否定(不仅仅是链接它们！)以使其成为有效的 CSS:
#foo > div:not(.foo), #foo > div:not(.bar), #foo > div:not(.baz)
As you can see, this is even more inconvenient than point 1.如您所见，这比第 1 点更不方便.
You can't use combinators. This works in jQuery, but not CSS:
你不能使用组合器.这在 jQuery 中有效，但在 CSS 中无效:
/*
* Grab everything that is neither #foo itself nor within #foo.
* Notice the descendant combinator (the space) between #foo and *.
*/
:not(#foo, #foo *)
This is a particularly nasty case, primarily because it has no proper workaround. There are some loose workarounds (1 and 2), but they almost always depend on the HTML structure and are therefore very limited in utility.这是一个特别令人讨厌的案例，主要是因为它没有适当的解决方法.有一些宽松解决方法(1 和 2)，但它们几乎总是依赖于 HTML 结构，因此实用性非常有限.
In a browser that implements querySelectorAll() and the :not() selector, using :not() in a selector string in a way that makes it a valid CSS selector will cause the method to return results directly, instead of falling back to Sizzle (jQuery's selector engine which implements the :not() extension). If you're a stickler for performance, this is a positively minuscule bonus you'll definitely salivate over.
在实现 querySelectorAll() 和 :not() 选择器的浏览器中，使用 :not()选择器字符串使其成为有效的 CSS 选择器将导致该方法直接返回结果，而不是回退到 Sizzle(实现 :not() 扩展的 jQuery 选择器引擎).如果您是性能的忠实拥护者，那么这绝对是一个微不足道的奖励，您肯定会垂涎三尺.
The good news is that Selectors 4 enhances the :not() selector to allow a comma-separated list of complex selectors. A complex selector is simply either a lone simple or compound selector, or an entire chain of compound selectors separated by combinators. In short, everything you see above.
好消息是 Selectors 4 增强了 :not() 选择器 允许以逗号分隔的复杂选择器列表.复杂选择器只是一个单独的简单或复合选择器，或者是由组合子分隔的整个复合选择器链.简而言之，你在上面看到的一切.
This means that the jQuery examples above will become valid level 4 selectors, which will make the pseudo-class much, much more useful when CSS implementations begin supporting it in the coming years.
这意味着上面的 jQuery 示例将成为有效的 4 级选择器，这将使伪类在未来几年 CSS 实现开始支持它时变得更加有用.
1 Although this article says that you can pass a comma-separated list of selectors to :not() in Firefox 3, you're not supposed to be able to. If it works in Firefox 3 as that article claims, then it's because a bug in Firefox 3 for which I can't find the ticket anymore, but it shouldn't work until future browsers implement future standards. Seeing how often that article is cited to date, I've left a comment to this effect, but seeing also how old the article is and how infrequently the site is being updated, I'm really not counting on the author coming back to fix it.
这篇关于为什么我的 jQuery :not() 选择器在 CSS 中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
