如何获取所有可能有祖先的元素，而它们的所有祖先都没有指定 class？

Question

我的 HTML 中有一部分与下面的相似，我必须 select 只有那些没有任何具有指定 class 祖先的元素。我从事的项目非常大，我认为我不应该 post 这里所有的代码，我认为这超出了 Whosebug 的目的。

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

// 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");

span {
    border: 0.1rem solid gray;
}

<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>

我把上面的代码放在this JSFiddle里了。我已经使用不带 jQuery 的 document.querySelectorAll 函数测试了两个 select or，并且行为相同。

非常感谢！ :-)

Answer 1

:not(.a) .b:not(.a)

选择所有具有 class b 但不具有 class a 且具有 [=26] 的元素=]没有class的任何祖先 a，例如，<body> & <html>.

:not(.a) > .b:not(.a)

选择所有带有 class b，没有 class a，没有 a 直接 parent 与 class a.

Answer 2

你的意思是 select .b 元素

不是.a，
没有任何祖先是.a?

那么这只能用 jQuery (learn more):

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

如果您需要在 CSS 中执行此操作，您可以使用 jQuery 和上述 select 添加 class 或者，或者使用覆盖：

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

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

如何获取所有可能有祖先的元素，而它们的所有祖先都没有指定 class？

How to get all elements which possibly have ancestors and all their ancestors are without a specified class?

html

javascript

jquery

css-selectors

jquery-selectors