当前位置: 首页 > 面试题库 >

为什么我的jQuery:not()选择器在CSS中不起作用?

田嘉澍
2023-03-14
问题内容

我有这样的布局:

<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类添加到没有其他类之一的扇区中alphabeta或者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;
}

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

但是看到:not()jQuery中的选择器是基于:not()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;
}

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

为什么:not()选择器在jQuery中起作用但在CSS中失败?自从jQuery声称自己是“符合CSS3的”以来,它在两个地方都不能完全一样工作吗?还是我缺少某些东西?

是否有一个纯CSS解决方法,还是我必须依靠脚本?


问题答案:

为什么:not()选择器在jQuery中起作用但在CSS中失败?自从jQuery声称自己是“符合CSS3的”以来,它在两个地方都不能完全一样工作吗?还是我缺少某些东西?

也许 应该 ,但是事实 并非如此 :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]))')

请记住,将以逗号分隔的选择器列表传递给:not()意味着过滤 与所有列出的选择器都不匹配的 元素。

另一方面,现在:not()选择器级别3中的伪类受其自身的限制。您只能将
一个简单的选择器 作为参数传递给:not()。这意味着您一次只能通过以下任何一项:

  • 通用选择器(*),可以选择使用名称空间
  • 型选择器(adivspanulli,等),任选地与一个命名空间
  • 属性选择器([att][att=val]等),可以选择使用名称空间
  • 类选择器(.class
  • ID选择器(#id
  • 伪类(:pseudo-class

因此,这是jQuery的:not()选择器和当前标准的:not()选择器之间的区别:

  1. 首先,要直接回答这个问题: 您不能传递以逗号分隔的选择器列表。 1例如,如小提琴所示,虽然给定的选择器可在jQuery中使用,但它不是有效的CSS:
    /* If it's not in the Α, Β or Γ sectors, it's unassigned */
    

是否有一个纯CSS解决方法,还是我必须依靠脚本?

幸运的是,在这种情况下,它已经存在。您只需要将多个:not()选择器一个接一个地链接,以使其成为有效的CSS:

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

它不会使选择 的是 更长的时间,但矛盾和不便依然明显。

  1. 您不能将简单的选择器组合到复合选择器中以与一起使用: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点更为不便。

  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结构,因此实用性非常有限。

  1. 在实现querySelectorAll():not()选择器的浏览器中,以:not()使其成为有效CSS选择器的方式在选择器字符串中使用将导致方法直接返回结果,而不是退回到Sizzle(实现:not()扩展的jQuery选择器引擎)。如果您是表现的坚持者,那么这肯定是一笔微不足道的奖金,您一定会垂涎三尺。

好消息是选择器4增强了:not()选择器,以允许使用逗号分隔复杂选择器列表。复杂选择器仅仅是一个简单的简单选择器或复合选择器,或者是由组合器分隔开的整个复合选择器链。简而言之,您在上方看到的所有内容。

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

1 尽管本文说您可以:not()在Firefox3中将以逗号分隔的选择器列表传递到,但您不应该能够这样做。如果该文章声称该版本可在Firefox3中运行,那是因为Firefox3中的一个错误我无法再找到该错误的票证,但直到将来的浏览器实现将来的标准时,它才起作用。看到该文章迄今被引用的频率,我已经对此效果发表了评论,但是还看到了该文章的年代以及该网站的更新频率如何,我真的没有指望作者再来修复它。



 类似资料:
  • 还不起作用。所以我放弃链接,我只是编码:

  • 问题内容: 我需要在CSS中使用属性选择器来更改不同颜色和图像上的链接,但是它不起作用。 我有这个HTML: 而这个CSS: 为什么背景不是红色的? 问题答案: 在href后面使用$。这将使属性值匹配字符串的结尾。

  • 问题内容: 我在使用这个特定的CSS选择器时遇到了麻烦,当我添加它时,它不希望工作。似乎可以与其他选择器的任何组合正常工作: 如果我删除了该部件,它就可以正常工作。即使我将选择器更改为它,也不会选择输入了文本的输入字段。这是坏了还是我只是不允许在选择器中使用? 我唯一想到的是浏览器仍在说该元素为空,因为它没有子元素,每个元素只有一个“值”。选择器是否没有针对输入元素和常规元素的单独功能?但这似乎不

  • 问题内容: 我正在使用选择器为不同的社交图标添加背景图像。但是,所有图标都显示相同。我究竟做错了什么? 问题答案: 所述选择器计数的兄弟姐妹(即,元件具有相同父节点)。 在您的HTML结构中,始终是的第一个,最后一个也是唯一的孩子。因此只有一个要计数的元素。 但是,存在多个锚元素,所有锚元素都是同级(的子级),因此可以针对每个锚元素。

  • HTML格式 我没有这个的id或名称。因此我写 但click()没有发生。 已尝试driver . find element(by . CSS selector("。按钮[值=搜索]”)。单击(); 尝试值='Search '(单引号)。 这些选择器正在

  • 问题内容: 我有一个嵌套的flexbox布局(使用bootstrapv4),可根据横向/纵向模式更改方向。第一层(由flexbox使用该属性放置)包含5个用作按钮的图标。我无法在这些图标上正常使用该属性。 如果我不使用属性,则图标将按照自然顺序进行布局;但是,如果我尝试使用该属性对其进行布局,则无法正常工作。在代码中,()应该是最后一个元素。不是。我可以通过更改源中的顺序来获得所需的顺序。但是,我