Question

我的HTML的一部分与下面的类似，我必须只选择没有任何具有指定类的祖先的元素。我工作的项目非常大，我想我不应该在这里发布所有代码，我认为这将超出StackOverflow的目的。

我想要的是过滤所有祖先的元素，而不仅仅是父母。我试过这个：

＆＃13;

// This colors two of the <span> elements instead of one. It colors the ".a > .b" <span> and this behavior seems wrong to me.
$(":not(.a) .b:not(.a)").css("color", "red");

// This call only colors the border of the ".b" <span> which, I think, is the correct behavior and should be the behavior of the call above.
$(":not(.a) > .b:not(.a)").css("border-color", "blue");

＆＃13;

span {
    border: 0.1rem solid gray;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <span class="b">.a > .b</span> <!-- Why does this <span> element become red? -->
  <span class="a b">.a > .a.b</span>
</div>
<div>
  <span class="b">.b</span>
  <span class="a b">.a.b</span>
</div>

＆＃13;

我已将上面的代码放在this JSFiddle中。我在没有jQuery的情况下使用document.querySelectorAll函数测试了两个选择器，行为是相同的。

非常感谢！ :-)

Answer 1

您的意思是选择.b元素

不是.a和
没有.a的任何祖先？

然后这只适用于jQuery（learn more）：

$(".b:not(.a, .a *)")

如果您需要在CSS中执行此操作，您可以使用上面的选择器使用jQuery添加一个类，或者使用覆盖：

.b {
  /* Style all .b elements */
}

.a .b, .a.b {
  /* Override the previous rule */
}

如何获得可能具有祖先及其所有祖先的所有元素都没有指定的类？

1 个答案: